Question

这是我到目前为止所做的：例如，当我单击button1时，content1显示，当我单击button2时，content1关闭并显示content2。到目前为止这个代码的工作原理：

    $("#buttons a").click(function(e){
    e.preventDefault();
    var toShow = $(this).attr('href');
    $(".togg").fadeOut();
    $(toShow).fadeIn();
    });

JSFiddle 我要做的是保留这个功能，但添加一些东西：如果content1已经打开，当我点击它的按钮（button1）时切换它，并在click1 div之外点击时切换它。总之，我想在点击任何地方时切换它，但div本身。

Answer 1

如果您想检查点击是在元素上还是在元素外部，那么您需要检查nodeName或tagName或id

$(document).click(function(e) {
  //Check the element is none of the DIVS which we wants prevent.
  if(e.target.id != "content1" && e.target.id != "content2" && e.target.id != "content3")
    {
      //Hide the content div which is visible now.
      $('div.togg:visible').hide();
    }
});

您只需创建一个动态选择器即可实现一种动态切换功能。

$("#buttons a").click(function(e){
    var selector = $('.'+$(this).attr('id'));
    selector.toggle();
    $('div.togg').not(selector).hide();
});

＆＃13;

$("#buttons a").click(function(e){
    var selector = $('.'+$(this).attr('id'));
    selector.toggle();
    $('div.togg').not(selector).hide();
});
$(document).click(function(e) {
  //Check the element is none of the DIVS which we wants prevent.
  if(e.target.id != "content1" && e.target.id != "content2" && e.target.id != "content3")
    {
      //Hide the content div which is visible now.
      $('div.togg:visible').hide();
    }
});

＆＃13;

.content1 {display:none;}
.content2 {display:none;}
.content3 {display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <a href="#" id="content1">Div 1</a>
  <a href="#" id="content2">Div 2</a>
  <a href="#" id="content3">Div 3</a>
</div>
<div>
  <div class="content1 togg">1111</div>
  <div class="content2 togg">2222</div>
  <div class="content3 togg">3333</div>
</div>

＆＃13;

单击显示/隐藏div，在div外部单击时切换

1 个答案: