Question

我想在用户点击另一个div时使用javascript显示div。

这是我的代码，它的工作正常，除了，我需要它以相反的方式工作。 div在加载时可见，并在用户点击另一个div后隐藏。

<div id="content_nav">
  <div class="login_heading">Logged in as, <strong><?php echo $_SESSION['user'];?>>/strong>, <a href="logout.php">Logout</a></div>
  <div class="control_panel">
    <div id="ctrl1" onclick="toggle();"></div>
    <p class="control">(0) Messages</p>
    <div id="msg_menu"></div>

    <script>
     var toggle = function() {
       var mydiv = document.getElementById('msg_menu');
       if (mydiv.style.display === 'none' || mydiv.style.display === '')
         mydiv.style.display = 'block';
       else
         mydiv.style.display = 'none'
     }
    </script>

的CSS：

#msg_menu{
   margin:auto;
   width:990px;
   height:200px;
   background:#000;
}

Answer 1

修改你的css，默认情况下该元素是隐藏的。然后，用户可以根据需要打开/关闭它。

#msg_menu{
   margin:auto;
   width:990px;
   height:200px;
   background:#000;
   display:none;
}

或者，如果您更喜欢使用javascript解决方案，那么您可以在元素加载时隐藏它。

使用切换功能onclick显示/隐藏div？

1 个答案: