在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中切換一個簡單的導航

回答

相關問題