制作链接后下拉菜单消失，已被选定

我有一个下拉菜单下面的代码：制作链接后下拉菜单消失，已被选定

<header> 
     <nav class="navbar"> 
      <div class="inner-wrapper"> 
       <a class="button" id="menu-button">Menu</a> 
       <ul> 
       <li><a href="#about">About</a></li> 
       <li><a href="#classes">Classes</a></li> 
       <li><a href="#contact">Contact</a></li> 
       </ul> 
      </div> 
     </nav> 
</header> 

header nav div ul { 
    list-style: none; 
    padding: 0; 
    line-height: 1.75; 
    background-color: rgba(255, 255, 255, 0.6); 
    margin-top: 5px; 
    overflow: hidden; 
    height: auto; 
    display: none; 
} 

header nav div ul.menu-open { 
    display: block; 
} 

$(".button").click(function() { 
    $("header nav div ul").animate({ 
    opacity: 1, 
    height: "toggle" 
    }, 300, function() { 
    $("header nav div ul").toggleClass("menu-open"); 
    }); 
});

所以，当用户点击该按钮就会切换这将打开菜单的类。该菜单目前用于单页网站，所以我也有一个平滑的滚动脚本工作。在用户做出选择后，如何使菜单消失，就像菜单在选择后消失并将其带到右侧部分一样。

谢谢！

来源

2017-08-25 Lucy S.

你可以尝试做这样的事情：

我加入了类锂选项的“LIS一个”标签，然后创建一个的onclick功能此类。

<header> 
    <nav class="navbar"> 
     <div class="inner-wrapper"> 
      <a class="button" id="menu-button">Menu</a> 
      <ul> 
      <li><a href="#about" class="li-option">About</a></li> 
      <li><a href="#classes" class="li-option">Classes</a></li> 
      <li><a href="#contact" class="li-option">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
</header> 

<script> 
header nav div ul { 
    list-style: none; 
    padding: 0; 
    line-height: 1.75; 
    background-color: rgba(255, 255, 255, 0.6); 
    margin-top: 5px; 
    overflow: hidden; 
    height: auto; 
    display: none; 
} 

header nav div ul.menu-open { 
    display: block; 
} 

$(".button").click(function() { 
    $("header nav div ul").animate({ 
    opacity: 1, 
    height: "toggle" 
    }, 300, function() { 
    $("header nav div ul").toggleClass("menu-open"); 
    }); 
}); 

$(".li-option").click(function() { 
    $("#menu-button").css('display', 'none'); 
});

来源

2017-08-25 20:43:45

是这方面的工作？ –

它应该。但我没有他的.css文件，所以我不能确定。露西S.应该回答。 –

如果你甚至不确定，你怎么回答。向下投票，因为你的回答是不给出输出， –

这种方法的一个问题是，如果您选择了错误的选项，用户需要重新加载整个页面才能重新选择是否意味着完全隐藏下拉菜单。但是，如果这是您希望采用的方法，只需在脚本中添加一个onchange处理程序，以在JS document.getElementById（id）.style.display = none;中通过id选择下拉列表。如果这不是你的意思，说明你想做什么，我们会再试一次。

来源

2017-08-25 20:42:35

试一下：a fiddle

$(".button").click(function() { 
    $("header nav div ul").animate({ 
    opacity: 1, 
    height: "toggle" 
    }, 300); 
}); 
$('.navbar li a').click(function(){ 
    $("header nav div ul").animate({ 
    opacity: 1, 
    height: "toggle" 
    }, 300); 
});

来源

2017-08-25 20:54:24

你不需要添加菜单公开课，动画是在这里做的一切 –

这也适用于我。选择不同的答案，因为这是我第一次尝试，但感谢您花时间回复。 –

$(".button").click(function() { 
    $("header nav div ul").animate({ 
    opacity: 1, 
    height: "toggle" 
    }, 300, function() { 
    $("header nav div ul").toggleClass("menu-open"); 
    $('.navbar li a').click(function(){ 
     $("header nav div ul").toggleClass("menu-open"); 
     $("header nav div ul").animate({ 
    opacity: 1, 
    height: "hide" 
    }, 300); 
    }); 
    }); 
});

我想事端像在JS bin和它的工作。这是你想要的？

jsbin

来源

2017-08-25 20:54:59 Frank

你不需要添加菜单打开的类，动画是在这里做的一切 –

我添加了一个click事件为<li>，然后模拟点击.button

$(".button").click(function() { 
 
    $("header nav div ul").animate({ 
 
    opacity: 1, 
 
    height: "toggle" 
 
    }, 300, function() { 
 
    $("header nav div ul").toggleClass("menu-open"); 
 
    }); 
 
}); 
 

 
$("li").click(function() { 
 
    $(".button").trigger("click"); // Simulate the button click 
 
});

header nav div ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    line-height: 1.75; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
    margin-top: 5px; 
 
    overflow: hidden; 
 
    height: auto; 
 
    display: none; 
 
} 
 

 
header nav div ul.menu-open { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <nav class="navbar"> 
 
    <div class="inner-wrapper"> 
 
     <a class="button" id="menu-button">Menu</a> 
 
     <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#classes">Classes</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</header>

来源

2017-08-26 06:42:12 Gerard

制作链接后下拉菜单消失，已被选定

回答

相关问题