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

我有一系列的图标，点击后会显示一个小箭头和一个产品列表。我可以让箭头显示，列表向下滑动，但我想做的是在单击另一个图标时隐藏当前可见的列表和箭头

有人能帮我或给我指一下正确的方向吗

HTML:

---

您可以使用jquery的类选择器滑动除当前div之外的所有其他div。在这里，您可以使用

class

属性，其值以

STORE

开头，请参见下面的代码

注意：jQuery有

.show（）

和

.hide（）

函数来显示和隐藏html元素，因此无需使用

.css（）

---

谢谢你的回复。我想我可能过度简化了我的html，比如ID和类STORE1、STORE2等等。。很可能是商店名称。我已经修改了我原来的帖子，以考虑到这一点。你仍然可以使用

stockist block下拉列表

类附加到所有div，我已经更新了我的帖子，请检查乐意帮助你：）。如果找到一个可行的解决方案，你可以接受这个答案。非常感谢。

<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>

$(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);
    });
});

$(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);
    });
});