Question

我有一系列图标，单击这些图标可以看到一个小箭头和一个产品列表。我可以显示箭头，列表也可以向下滑动，但是我想做的就是单击另一个图标时隐藏当前可见的列表和箭头。

任何人都可以帮忙或指出正确的方向吗？

HTML：

<div class="container">
    <ul class="stockist-block">
      <li class="stockist-icon" id="STORE1">
          <img src="icon1.jpg" class="attachment-post-thumbnail" />
        <div class="stockist-arrow"> 
            <img src="blue-arrow.jpg"/> 
        </div>
      </li>
      <li class="stockist-icon" id="STOREONSTREET">
          <img src="icon2.jpg" class="attachment-post-thumbnail" />
        <div class="stockist-arrow"> 
            <img src="blue-arrow.jpg"/> 
        </div>
      </li>
      <li class="stockist-icon" id="SHOPONCORNER">
          <img src="icon3.jpg" class="attachment-post-thumbnail" />
        <div class="stockist-arrow"> 
            <img src="blue-arrow.jpg"/> 
        </div>
      </li>
    </ul>
</div>


<div class="container"> 
    <div class="stockist-block-dropdown STORE1">
        <div class="col">
            <ul class="stockist-block-products clearfix">
                <li><a href="link.html" target="_blank">product-title1</a></li>
                <li><a href="link.html" target="_blank">product-title2</a></li>
                <li><a href="link.html" target="_blank">product-title3</a></li>
                <li><a href="link.html" target="_blank">product-title4</a></li>
            </ul>
        </div>
    </div>
    <div class="stockist-block-dropdown STOREONSTREET">
        <div class="col">
            <ul class="stockist-block-products clearfix">
                <li><a href="link.html" target="_blank">product-title1</a></li>
                <li><a href="link.html" target="_blank">product-title2</a></li>
                <li><a href="link.html" target="_blank">product-title3</a></li>
                <li><a href="link.html" target="_blank">product-title4</a></li>
            </ul>
        </div>
    </div>
    <div class="stockist-block-dropdown SHOPONCORNER">
        <div class="col">
            <ul class="stockist-block-products clearfix">
                <li><a href="link.html" target="_blank">product-title1</a></li>
                <li><a href="link.html" target="_blank">product-title2</a></li>
                <li><a href="link.html" target="_blank">product-title3</a></li>
                <li><a href="link.html" target="_blank">product-title4</a></li>
            </ul>
        </div>
    </div>
</div>

jQuery：

$(document).ready(function() {
    $ (".stockist-icon").on('click', function(){
        $(this).children('.stockist-arrow').css('visibility','visible');
        var elementid = $(this).attr("id");
        $("div." + elementid).stop().slideDown(400);
    });
});

Answer 1

您可以使用jquery的类选择器来滑动除当前div外的所有其他div。在这里，您可以使用class属性，其值以STORE开头，请参见下面的代码

注意：jQuery具有.show()和.hide()函数来显示和隐藏html元素，因此无需使用.css()

$(document).ready(function() {
    $ (".stockist-icon").on('click', function(){
        //$(this).children('.stockist-arrow').css('visibility','visible'); -- use .show()
        $(this).children('.stockist-arrow').show();
        var elementid = $(this).attr("id");
        var selector = "div.stockist-block-dropdown." + elementid;
        $("div.stockist-block-dropdown").not(selector).stop().slideUp(400); // slidup other divs
        $(selector).stop().slideDown(400);
    });
});

选择新元素时，jQuery隐藏元素

1 个答案: