使用 .toggle() 在单击时显示和隐藏 div 不起作用答案

【问题标题】：Using .toggle() to show and hide a div on click not working使用 .toggle() 在单击时显示和隐藏 div 不起作用
【发布时间】：2017-05-10 01:47:53
【问题描述】：

我正在尝试编写一个 jQuery 函数来隐藏/显示单击时的 div。

我有一个<a> 标签，其类为my-button。当页面加载时，具有 my-div 类的 div 最初被 display: none 隐藏。当用户点击my-button 并且my-div 被隐藏时，我想显示my-div。当my-div 可见时，我希望能够在用户单击页面上除my-div 之外的任何位置时隐藏它。这还包括点击my-button。

<a class="my-button">Click me!</a>
<div class="my-div">Show Me or Hide Me!</div>

我尝试使用.toggle() 函数但没有成功；单击my-button 后，my-div 将不会显示。如果我将.toggle() 替换为.show()，如果我单击页面上的任何位置，my-div 将显示和隐藏，但如果我再次单击my-button，则不会显示和隐藏。

$(document).mouseup(function(e) {
        var $container = $(".my-div");

        $(".my-button").click(function(){
            $container.toggle();
        });

        if (!$container.is(e.target) && $container.has(e.target).length === 0) {
            $container.hide();
        } 
});

实现我想要的最佳方式是什么。

【问题讨论】：

标签： jquery toggle

【解决方案1】：

这是你要找的吗？

$(document).mouseup(function(e) {
  var $container = $(".my-div");
  if (!$container.is(e.target) && !$(".my-button").is(e.target) && $container.has(e.target).length === 0) {
    $container.hide();
  }
});

$(".my-button").click(function() {
  $(".my-div").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="my-button">Click me!</button>
<div class="my-div">Show Me or Hide Me!</div>

【讨论】：

【解决方案2】：

您必须正确地将事件附加到按钮并使用toggle() 隐藏或显示div

$(document).ready(function(e) {
    $(".my-button").click(function(e){
      $(".my-div").toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="my-button">Click me!</a>
<div class="my-div">Show Me or Hide Me!</div>

【讨论】：

【解决方案3】：

首先我会尝试在按钮点击时显示/隐藏试试这个。首先给你的按钮一个 id="show_hide" 和你的 div 一个 id="my_div"

    $('#show_hide').click(function (e) {
        var x = document.getElementById('my_div');
        if (x.style.display === 'none') {
            x.style.display = 'block';
        } else {
            x.style.display = 'none';
        }
    });

您可以将 ID 更改为您想要的任何内容，但我建议您这样做，以防您想为其他元素提供相同的类但没有此功能

或者，您可以添加它以使其在单击按钮以外的任何其他位置时消失，您应该能够使用以下功能

$(document).ready(function(){ 

  $(document).mousedown(function(e){ 
    var x = document.getElementById('my_div');
    if( e.button == 1 ) { 
        var isHovered = $('#my_div').is(":hover");
        if (!isHovered) {
            x.style.display = 'none';
        }
    } 

  }); 
});

【讨论】：