Question

我已经在我的HTML页面中导入了jQuery和Bootstrap。

Anyhoo，我想点击小菜单图片后切换下拉菜单。

以下是我隐藏菜单下拉菜单的方法：

.menu {
  height:150px;
  width:155px;
  background-color:black;
  border-radius:5px;
  position:absolute;
  top:-10px;
  left:100%;
  padding-left:0;
}
.menu-active {
  position:absolute;
  top:35px;
  left:60%;
}

为了使其具有响应性，我首先尝试addClass（menuBtn是按钮图像，我得到了）：

$('.menuBtn').click(function(){
  $('.menu').addClass('menu-active');
})

哪个工作非常顺利，但如果我添加时间addClass('menu-active', 1000)，它总是被忽略，但这是一个小问题！我想要切换，所以我尝试将其更改为toggleClass：

$('.menuBtn').click(function(){
  $('.menu').toggleClass('menu-active');
})

即使我打算绕过切换，只需使用if，如：

function menuDropdown(){
$('.menuBtn').on('click', function(){
 if($('.menu').hasClass('menu-active')){
  $('.menu').removeClass('menu-active');
  }else{
    $('.menu').addClass('menu-active');
 });
}

这两个都不起作用，网站只是彻底忽略了它们。我知道bootstrap有一种更简单的方法可以做到这一点，我只想看看我能自己写什么。

Answer 1

这是解决问题的一种方法。创建一个ID并使用它来引用您的菜单，而不是尝试使用菜单类：

<强> HTML：

<div id="toggler" class="menu">Menu Example</div>
<button type="button" class="menuBtn">Click me</button>

<强> JQuery的：

$('.menuBtn').click(function () {
        $('#toggler').toggleClass('.menu-active menu');
 });

注意上面如何根据#toggler ID切换.menu-active和.menu类。

一个工作示例：http://jsfiddle.net/gratiafide/vubsv2pt/12/

toggleClass不起作用，但addClass做

1 个答案: