Question

我有几个带有'.intro'类的div。在这些div中，我有按钮标签，用类'.more'触发div的上下滑动。我如何编码它以便它打开相关的“更多”div而不是一次打开所有这些？

这是我到目前为止尝试的jquery：

function answer() {
   $(".trigger").click(function () {
        if ($(".slider").hasClass("slideup"))
            $(".slider").removeClass("slideup").addClass("slidedown");
         else
            $(".slider").removeClass("slidedown").addClass("slideup");
        });
   }; 



$.each($(answer($('.intro'))));

我的HTML在这里：

 <div class="container">
      <div class="icon">
        <img src="images/tour-1.png" alt=""/>
    </div>
    <div class="intro">
      <button class="trigger">x</button>
      <h2>The gold standard</h2>
      <h3>Over 25 years training elite digital and direct marketers</h3>
      <div class="slider" class="slideup">
                <div class="more">
                   <p>Respected across the globe, we've awarded over 10,000 professional qualifications and trained 62,000 marketers on short courses. All IDM  digital marketing course content is continually reviewed and updated by a dedicated network of over 200 marketing practitioners.</p>
               </div>
           </div>
       </div>
   </div>
   <div class="container">
    <div class="icon">
        <img src="images/tour-6.png" alt=""/>
    </div>
    <div class="intro">
      <button class="trigger">x</button>
      <h2>Professional marketing qualifications for digital marketers</h2>
      <h3>The IDM is the UK's only government approved awarding body for direct and digital marketing</h3>
      <div class="slider" class="slideup">
                <div class="more">
                   <p>Choose from our range of digital marketing courses, depending on your level and field of interest. Independent proof of your expertise and               commitment.</p>
               </div>
           </div>
       </div>
   </div>
   <div class="container">
    <div class="icon">
        <img src="images/tour-5.png" alt=""/>
    </div>
    <div class="intro">
      <button class="trigger">x</button>
      <h2>Learn through technology</h2>
      <h3>Interactive and engaging content in the palm of your hand</h3>
      <div class="slider" class="slideup">
                <div class="more">
                   <p>We're passionate about bringing together the latest learning technology and expert digital marketing knowledge in a virtual campus full of               learning resources</p>
               </div>
           </div>
       </div>
   </div>

http://jsfiddle.net/isherwood/4xym8evp/

Answer 1

http://jsfiddle.net/isherwood/4xym8evp/2/

$('.trigger').click(function () {
    $(this).siblings('.slider').find('.more').slideToggle();
});

Answer 2

如果我明白了，你想在div'。'''里面用类'.more'向上/向下滑动div。触发按钮。

$(".trigger").click(function () {
    var slider = $(this).parent().find('.slider');
    if (slider.hasClass("slideup"))
        slider.removeClass("slideup").addClass("slidedown");
     else
        slider.removeClass("slidedown").addClass("slideup");
    });
};

Answer 3

这是你想要的吗？

$(document).ready(function(){
    $(".trigger").click(function(){
        $(this).siblings(".slider").find(".more").slideToggle();
    });
});

Fiddle

每个函数jquery都有多个div

3 个答案: