如何显示/隐藏项目onclick jquery答案

【问题标题】：how to show/hide item onclick jquery如何显示/隐藏项目onclick jquery
【发布时间】：2015-11-03 08:24:11
【问题描述】：

我想显示anchor的某个div onclick，然后我想再次隐藏anchor的div onclick，这是我的代码：

jQuery('.mycart').click(function(e){

            e.preventDefault();
            var target = jQuery(".basket");

            if(target.is(':visible'))

                jQuery('.basket').css('cssText', 'display: none !important');

            else

                jQuery('.basket').css('cssText', 'display: block !important');
        });

jQuery(document).mouseup(function (e){
        var container =jQuery(".basket");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            container.hide();
        }
    });

html:

<a class="cart mycart" href="#">My Cart</a>
<div class="basket">
<span class="callout-arrow"></span>
<div class="basketcount"><span>5</span></div>
   <button type="button" class="checkoutbtn">checkout</button>
</div>

div 在点击时显示成功，但它不再隐藏。问题是由第二个函数引起的，即当用户在容器外部单击时隐藏容器。

【问题讨论】：

你要支持哪些浏览器？
你有checked this吗？？

标签： jquery html css

【解决方案1】：

您的代码有效。无论如何，我已经添加了 2 个其他解决方案：

jQuery('.mycart').click(function(e){

    e.preventDefault();
    $(".basket").slideToggle(800);
});

http://codepen.io/damianocel/pen/avjVGQ

我已经评论了一个，你试试看你最喜欢哪一个。

【讨论】：

元素显示在css中是无且重要的，所以这不起作用，css规则将覆盖它
它不应该，如果使用fadeToggle 方法，默认情况下将显示设置为无。顺便说一句，slideToggle 方法也是如此。

【解决方案2】：

在您的 JQuery 中使用此代码

$('.mycart').click(function() {
   if($('.basket').is(':visible')) {
       $('.basket').hide()
   }
  else {
       $('.basket').show()
  }
})

【讨论】：

【解决方案3】：

我找到了解决办法，如果点击的目标是锚点$('.mycart')，只要阻止mouseup()函数隐藏容器，所以当用户点击这个锚点时，这个锚点的click()函数会正常应用并隐藏容器（如果显示），这是新的 jquery：

jQuery('.mycart').click(function(e){

        e.preventDefault();
        var target = jQuery(".basket");

        if(target.is(':visible'))
            jQuery('.basket').css('cssText', 'display: none !important');

        else
            jQuery('.basket').css('cssText', 'display: block !important');
    });

    jQuery(document).mouseup(function (e){
        var container =jQuery(".basket");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0 && !jQuery('.mycart').is(e.target)) // ... nor a descendant of the container or .mycart anchor
        {
            container.hide();
        }
    });

【讨论】：

【解决方案4】：

试试这个...

jQuery('.mycart').click(function(e) {
    e.preventDefault();
    var target = jQuery(".basket");
    if(target.is(':visible')) {
        jQuery('.basket').css('cssText', 'display: none !important');
    } else {
        jQuery('.basket').css('cssText', 'display: block !important');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="cart mycart" href="#">My Cart</a>
<div class="basket">
    <span class="callout-arrow"></span>
    <div class="basketcount"><span>5</span></div>
    <button type="button" class="checkoutbtn">checkout</button>
</div>

【讨论】：

@user2101939 ，为什么需要代码中的附加方法？我的示例在 chrome 中有效，无需您进行更改。
用户点击退出时需要隐藏容器的第二种方法
@user2101939 ，“点击”是什么意思？
我的意思是当用户在容器外点击时。