Question

在点击“打开”链接之前，尝试使用#mobile-menu隐藏创建此隐藏/显示div。问题是垂直和水平样式的居中正在干扰一切并弄乱它，所以它不能被隐藏。有任何关于如何解决这个问题的想法？它不能用display：none隐藏;它不能用jQuery隐藏......

代码： https://jsfiddle.net/Lmyrb64g/2/

$('#mobile-menu').hide();
$('.openmobile').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('#mobile-menu').slideToggle('fast');
    });
});

HTML

<style>
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    text-align: center;
    z-index: 1111111111111;
}
#mobile-menu:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
#mobile-menu #links {
    display: inline-block;
    vertical-align: middle;
    font-size: 26px;
    line-height: 40px;
    font-weight: 600;
    font-family: Cabin;
}
#mobile-menu #links a {
    display: block;
}
</style>
<div id="mobile-menu" class="visible-phone">
    <div id="links">
      <a href="http://eldeskin.com/collections/all">SKIN CARE</a>
      <a href="#">BODY CARE</a>
      <a href="#">MAKE-UP</a>
      <a class="search-show">SEARCH</a>     
    </div>
</div>
<a href="#" class="openmobile">open</a>

Answer 1

你几乎在那里：https://jsfiddle.net/Lmyrb64g/8/

试试这段代码：

$('#mobile-menu').hide();

$('.openmobile').on('click', function(){
    $('#mobile-menu').slideToggle('fast');
});

你忘了在小提琴的左侧加入jQuery：

我不确定您要对此代码执行什么操作：

$('.openmobile').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('#mobile-menu').slideToggle('fast');
    });
});

.openmobile只存在一次，因此无需.each()然后再向下

在这种情况下，{p> $(this).next('#mobile-menu') $(this)实际上会出现无效的点击，但如果它是.openmobile则没有.next('#mobile-menu') ...

Answer 2

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">       </script>
  <script>
 $(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
 });
$("#show").click(function(){
    $("p").show();
 });
  });
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

在CSS中显示标签，用Jquery hide / show中断

2 个答案: