不使用CSS顯示/隱藏

我有以下示例。我想通過更改CSS屬性來實現。我該怎麼做？不使用CSS顯示/隱藏

<div id="btn-toggle-menu">Menu</div> 
     <div id="menu-wrapper"> 
     <ul> 
      <li>link item</li> 
      <li>link item</li> 
      <li>link item</li> 
      <li>link item</li> 
      <li>link item</li> 
      <li>link item</li> 
     </ul> 
     </div>

的jQuery：

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

    $('#btn-toggle-menu').on('click', function(e) { 
    var menu = $('#menu-wrapper'); 
     if(menu.is(':hidden')) { 
     menu.show(); 
     } else { 
     menu.hide(); 
     } 
    });

FIDDLE

來源

2013-09-24 Benny

這看起來像很多代碼來顯示/隱藏。退房http://api.jquery.com/toggle/ – Anagio

你的意思是http://jsfiddle.net/arunpjohny/3bUph/1/ –

你可以做$（'＃meu-wrapper'）.css（'display '， '沒有'）; –

jQuery的Hide & Show的行爲很像CSS的display:none & display: [the default display value of the element]

Working Fiddle< - 以最小的變化（我會實際使用this）

來源

2013-09-24 06:07:44 avrahamcool

嘗試JQuery .toggle()

$("#btn-toggle-menu").click(function() { 
    $("#menu-wrapper").toggle("slow", function() { 
    // Animation complete. 
    }); 
});

來源

2013-09-24 06:07:16

嘗試jQuery的

$("#btn-toggle-menu").click(function() { 
    $("#menu-wrapper").toggle(); 
});

來源

2013-09-24 06:14:56

確定這裏。

<div id="btn-toggle-menu">Menu</div> 
    <div id="menu-wrapper"> 
    <ul> 
     <li>link item</li> 
     <li>link item</li> 
     <li>link item</li> 
     <li>link item</li> 
     <li>link item</li> 
     <li>link item</li> 
    </ul> 
    </div>

這是你的代碼？

使用jQuery可以選擇哪個元素在哪個事件上使用哪個屬性。實際上，jQuery切換CSS屬性。所以一旦你指定了正確的eventelement和css-property，你想要達到什麼目的。

看一看：

這裏event將是一個click和元素，以改變其display將ul。您想要顯示/隱藏ul。所以這會做這項工作。

$('#btn-toggle-menu').click(function() { // on the click event 
    $('#menu-wrapper').toggle(); // toggle would hide/show it. on its own :) 
})

您可以瞭解這個在這裏：http://api.jquery.com/toggle/

注：您必須擁有jQuery插件這一點。確保jQuery事件發生。您可以在我提供的網站的頁腳下載插件。：）祝你好運！

您的代碼：

您的代碼也不錯，但它的很多冗長，更像是硬編碼！

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

$('#btn-toggle-menu').on('click', function(e) { 
var menu = $('#menu-wrapper'); 
    if(menu.is(':hidden')) { 
    menu.show(); 
    } else { 
    menu.hide(); 
    } 
});

這將首先在菜單上看看，如果它隱藏然後它會顯示！否則就隱藏它。這很好，正確！但有點冗長的jQuery API可以幫助你輕鬆解決這個問題。使用他們的插件。從底部的鏈接下載它，最新的插件可以讓你使用jQuery的所有最新功能。:)

編輯我在你的代碼所做的：

我只是從你的小提琴editted jQuery代碼，這是結果：

fiddle。在這裏，我能夠隱藏/顯示div :)而且它只是一行代碼！

來源

2013-09-24 06:20:05

不使用CSS顯示/隱藏

回答

相關問題