Question

我有两个链接，当点击时，切换两个不同的div。我添加了第二个函数，这样当你在div外面点击时，div就会关闭。这是我目前的代码：

function toggleDiv(divId){
    $("#"+divId).toggle();

    $("body").click(function(){
        $("#bio").hide(0);
        $("#prj").hide(0);
    });
}

https://jsfiddle.net/cxqL0ej9/

我不是jQuery的专家，所以我需要帮助来重做代码。目前，一切正常，但如果我再次点击该链接，则没有任何反应（因为它会切换＆＃34;隐藏＆＃34;我认为也是如此）。这就是我需要的：

当您点击这两个链接时，每个隐藏的div显示为AND如果再次单击，则会再次隐藏
当您点击其他地方时，可见的div隐藏

Answer 1

我推荐这样的东西：

JQuery的

$( // your element  ).on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('cssToggle');
});

$("body").on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('cssToggle');
});

CSS

// Element to hide
.cssToggle
{
   display: none;
}

Answer 2

这是一个有效的例子：

$(window).ready(function() {

  $("body").on("click", function() {
    $(".toggle-menu-text").hide();
  });

  $("[data-id-target]").on("click", function(e) {
    e.stopPropagation();
    var targetId = $(this).data("id-target");
    var open = !$("#" + targetId).is(':visible');

    $(".toggle-menu-text").hide();

    if (open) {
      $("#" + targetId).show();
    } else {
      $("#" + targetId).hide();
    }
  });

  $(".toggle-menu-text").on("click", function(e) {
    e.stopPropagation();
  });
});

html,
body {
  height: 100%;
}
.toggle-menu-text {
  background-color: red;
  display: none;
}
.position-fixed {
  position: fixed;
  width: 100%;
}
.position-fixed.position-fixed-top {
  top: 10px;
}
.position-fixed.position-fixed-bottom {
  bottom: 10px;
}
.text-center {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-fixed position-fixed-top text-center">
  <a href="javascript:void(0);" data-id-target="bio">Title</a>
  <div class="toggle-menu-text" id="bio">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore omnis eligendi neque nam quis numquam earum molestias similique modi quasi exercitationem amet, quas consectetur ratione officia ab. Ut, iusto, distinctio.
  </div>
</div>

<div class="position-fixed position-fixed-bottom text-center">
  <div class="toggle-menu-text" id="prj">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore omnis eligendi neque nam quis numquam earum molestias similique modi quasi exercitationem amet, quas consectetur ratione officia ab. Ut, iusto, distinctio.
  </div>
  <a href="javascript:void(0);" data-id-target="prj">Index</a>
</div>

切换div - 单击标题或随处关闭

2 个答案: