Question

所以我有这个jQuery允许我点击一个元素，它会扩展隐藏的东西。但是你可以点击多个元素，它们都将被扩展。我只想在任何一点延长一个人......有人可以帮助我吗？

if( $(window).width() >= 991 ) {
    $('.brands-supply .single').click(function() {
        $id = $(this).attr('href');
        $($id).stop().slideDown('fast');
    }, function() {
        $($id).stop().slideUp('fast');
    });
}

HTML

<div class="brands-supply hidden-sm hidden-xs">
  <h2> Our Consultancy Services </h2>
  <div class="container">
    <div class="row">
      <a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample0" style="background: #464648;" aria-expanded="false">
        <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/cookies.png">
      </a>
      <a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample1" style="background: #5e5e5e;" aria-expanded="false">
        <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/Brian.jpg">
      </a>
      <a class="col-md-3 single" data-toggle="collapse" href="#collapseExample2" style="background: #9a9a9a;">
        <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/11/Executive_proection_services.jpg">
      </a>
      <a class="col-md-3 single" data-toggle="collapse" href="#collapseExample3" style="background: #cccccc;">
        <img src="">
      </a>
    </div>
    <div class="row">
      <div class="col-md-12 collapse" id="collapseExample0" style="height: 0px; background: rgb(70, 70, 72);" aria-expanded="false">
        <div class="text">
          <div class="row">
            <div class="col-md-4">
              <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
            </div>
            <div class="col-md-7">
              <p>Reviews</p>
              <p>&nbsp;</p>
              <p>This si a p tag</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 collapse" id="collapseExample1" style="height: 0px; background: rgb(94, 94, 94);" aria-expanded="false">
        <div class="text">
          <div class="row">
            <div class="col-md-4">
              <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
            </div>
            <div class="col-md-7">
              <p>Testing</p>
              <p>&nbsp;</p>
              <p>This is a ap tag</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 collapse" id="collapseExample2" style="background: #9a9a9a;">
        <div class="text">
          <div class="row">
            <div class="col-md-4">
              <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
            </div>
            <div class="col-md-7">
              <p>Projects</p>
              <p>&nbsp;</p>
              <p>This is a p tag</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 collapse" id="collapseExample3" style="background: #cccccc;">
        <div class="text">
          <div class="row">
            <div class="col-md-4">
              <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
            </div>
            <div class="col-md-7">
              <p>Services</p>
              <p>&nbsp;</p>
              <p>This is a Ptag</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

任何帮助表示赞赏！

Answer 1

首次点击不会将两个函数作为参数。您应该使用slideToggle。

if( $(window).width() >= 991 ) {
    $('.brands-supply .single').click(
        function() {
            var id = $(this).attr('href');
            $('.brands-supply .single').each(
                function () {
                    var href = $(this).attr('href');
                    if (href == id) return;
                    $(href).slideUp('fast');
                }
            );
            $(id).stop().slideToggle('fast');
        }
    );
}

因此，点击选择您点击的所有元素并迭代它们，如果它们不是当前点击的href，则将它们向上滑动。然后只需在点击的一个上使用slideToggle，它就会根据当前显示的方式向上或向下滑动。

小提琴：http://jsfiddle.net/AtheistP3ace/xkv31rop/

JS：

same as above

CSS：

div > div {
    height: 100px;
    width: 100%;
    display: none;
}

#id1 {
    background: red;
}

#id2 {
    background: blue;
}

#id3 {
    background: orange;
}

HTML：

<div class="brands-supply">
    <a class="single" href="#id1">id1</a>
    <a class="single" href="#id2">id2</a>
    <a class="single" href="#id3">id3</a>
    <div id="id1"></div>
    <div id="id2"></div>
    <div id="id3"></div>
</div>

jQuery删除＆amp;点击

1 个答案: