时间戳

首页 > 解决方案 > 选择新元素时jQuery隐藏元素

jquery - 选择新元素时jQuery隐藏元素

问题描述

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

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

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

标签： jquery

解决方案

您可以使用 jquery 的类选择器滑动除当前一个以外的所有其他 div。在这里您可以使用class以 as 开头的属性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);
    });
});

推荐阅读