在Javascript中切换一个简单的导航

我想有一个非常简单的导航菜单。它必须是可点击的。因此，使用此代码在Javascript中切换一个简单的导航

var isActive = true; 
 

 
function toggleMenu(){ 
 
    var content = $("#navContent"); 
 

 
    isActive = !isActive; // toggle the current menu state 
 
    if(isActive) { 
 
     content.display = "block"; // show the items 
 
    } else { 
 
     content.display = "none"; // hide all items 
 
     content.position = "absolute"; 
 
     content.zIndex = 1; 
 
    } 
 
}

#navContainer { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#navContent button { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body onLoad="toggleMenu()"> 
 

 
<div id="navContainer"> 
 
    <button id="navBtn" onclick="toggleMenu()">Menu</button> 
 
    <div id="navContent"> 
 
     <button>1</button> 
 
     <button>2</button> 
 
     <button>3</button> 
 
     <button>4</button> 
 
    </div> 
 
</div> 
 

 
</body>

，并按下菜单按钮时，我进入toggleMenu()功能，但该项目不隐瞒。

有人可以帮我吗？

来源

2017-08-14 peterHasemann

是被解雇的功能？ –

'$（“＃navContent”）'返回一个jQuery对象，但要直接访问.style，您需要对DOM元素的引用。但jQuery有操作元素样式的方法，所以不需要首先混合这两种方法。它也有.show/.hide（尽管这些也不是完成这个的理想方法 - 你只需要切换一个类，然后将格式设置为你的样式表。） – CBroe

不知道为什么你不只是使用'toggle （）'为此并将显示设置为隐藏在CSS中以在页面呈现时隐藏菜单，但是如果您想继续使用您正在使用的方法，那么您应该在尝试定位并更改'css'之前定位'css'， CSS属性。 **例如：**'content.css（“display”，“block”）;' – NewToJS

你的代码是纯JS和jQuery的一个相当奇怪的组合。我建议使用一个或另一个。下面是使用jQuery代码的简单版本：

$(function() { 
 
    $('#navBtn').click(function() { 
 
    $('#navContent').toggle(); 
 
    }); 
 
});

#navContainer { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#navContent button { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="navContainer"> 
 
    <button id="navBtn">Menu</button> 
 
    <div id="navContent"> 
 
    <button>1</button> 
 
    <button>2</button> 
 
    <button>3</button> 
 
    <button>4</button> 
 
    </div> 
 
</div>

来源

2017-08-14 12:10:07

啊，'element.toggle（）'保持代码非常干净:) – peterHasemann

这将是更容易使隐藏的元素，然后由JS切换CSS类。这个答案并不需要jQuery的

function toggleMenu(){ 
 
    document.getElementById('navContent').classList.toggle("hidden") 
 
}

#navContainer { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#navContent button { 
 
    display: block; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<div id="navContainer"> 
 
    <button id="navBtn" onclick="toggleMenu()">Menu</button> 
 
    <div id="navContent" class="hidden"> 
 
     <button>1</button> 
 
     <button>2</button> 
 
     <button>3</button> 
 
     <button>4</button> 
 
    </div> 
 
</div>

来源

2017-08-14 12:11:14 Vilsol

为什么不是简化为：

$("#navBtn").click(function() { 
 
    $("#navContent").toggle(); 
 
});

#navContainer { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#navContent { 
 
    display: none; 
 
} 
 

 
#navContent button { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 

 
    <div id="navContainer"> 
 
    <button id="navBtn">Menu</button> 
 
    <div id="navContent"> 
 
     <button>1</button> 
 
     <button>2</button> 
 
     <button>3</button> 
 
     <button>4</button> 
 
    </div> 
 
    </div> 
 

 
</body>

来源

2017-08-14 12:15:20 DCdaz

在Javascript中切换一个简单的导航

回答

相关问题