Question

我正在使用slideToggle()方法来隐藏和显示我网站上的一些长内容，但问题是它无法正常工作。单击“加载更多”时，隐藏元素的css应从display:none;更改为display:block;，但不会更改，元素将保持隐藏状态。我在下面提供了我的代码。

<div class="categories">
    <span class="acc_trigger pull-right btn">Load more</span>
    <div class="acc_container">
        <div class="sub-categories sec block">
            <button type="button" class="btn btn-success"><a href="#">Button</a></button>
            <button type="button" class="btn btn-success"><a href="#">Button</a></button>
            <button type="button" class="btn btn-success"><a href="#">Winery</a></button>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery(".acc_container > div").hide();
        jQuery(".categories span").click(function(){
            jQuery(this).siblings(".acc_container > div").slideToggle();
        });
    })
</script>

Answer 1

.siblings()方法允许我们在DOM树中搜索这些元素的兄弟姐妹。

您需要使用

jQuery(this).siblings(".acc_container").find('div')

而不是

jQuery(this).siblings(".acc_container > div")

jQuery(document).ready(function() {
  jQuery(".acc_container > div").hide();
  jQuery(".categories span").click(function() {
    var div = jQuery(this).siblings(".acc_container").find('div');
    div.slideToggle();
    $(this).text(div.is(':visible') ? 'Load less' : 'Load more');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categories">
  <span class="acc_trigger pull-right btn">Load more</span>
  <div class="acc_container">
    <div class="sub-categories sec block">
      <button type="button" class="btn btn-success"><a href="#">Button</a>
      </button>
      <button type="button" class="btn btn-success"><a href="#">Button</a>
      </button>
      <button type="button" class="btn btn-success"><a href="#">Winery</a>
      </button>
    </div>
  </div>
</div>

您可以使用:visible选择器

jQuery(".categories span").click(function() {
    var div = jQuery(this).siblings(".acc_container").find('div');
    div.slideToggle();
    $(this).text(div.is(':visible') ? 'Load less' : 'Load more');
});

slideToggle（）方法不起作用

1 个答案: