简单的手风琴与jquery

时间:2014-09-24 14:01:42

标签: jquery

我用jquery构建简单的手风琴。我尝试使用jquery .next()方法,但没有运气,点击时没有任何反应。我应该采用另一种jquery方法还是我正确的方式,有任何想法吗? 这是我的HTML:

        <article class="TimBox">
          <img src="/images/Tim01.jpg">
          <div class="TimBoxTekst">
            <h2>Title 1</h2>
            <h3>Subtitle 1</h3>
            <div class="LinkBox">
              <a href="#">more<i class="fa fa-angle-right"></i></a>
            </div>
          </div>
          <div class="clear"></div>
          <div class="TimBoxBio">Hidden text 1</div>
        </article>

        <article class="TimBox">
          <img src="/images/Tim01.jpg">
          <div class="TimBoxTekst">
            <h2>Title 2</h2>
            <h3>Subtitle 2</h3>
            <div class="LinkBox">
              <a href="#">more<i class="fa fa-angle-right"></i></a>
            </div>
          </div>
          <div class="clear"></div>
          <div class="TimBoxBio">Hidden text 2</div>
        </article>

这是我的jquery:

$(document).ready(function() {
    $(".TimBox .LinkBox").click(function() {
        if($(this).next(".TimBoxBio").is(":visible")){
            $(this).next(".TimBoxBio").slideUp();
        return false;
        } else {
            $(".TimBox .TimBoxBio").slideUp();
            $(this).next(".TimBoxBio").slideToggle();
        return false;
        }       
    });
});

这是css:

.TimBox .TimBoxBio{
    position:relative;
    display:none;
}

1 个答案:

答案 0 :(得分:1)

.next()用于获取紧随其后的兄弟。在您的情况下,.TimBoxBio不是相对于.LinkBox的下一个元素。

试试这个:

$(document).ready(function() {
    $(".TimBox .LinkBox").click(function() {
        var $bio = $(this).closest('.TimBox').find('.TimBoxBio');

        if($bio.is(":visible")){
            $bio.slideUp();
            return false;
        } else {
            $(".TimBox .TimBoxBio").slideUp();
            $bio.slideToggle();
            return false;
        }       
    });
});

请在此处查看工作小提琴:http://jsfiddle.net/dou457gk/