.slideToggle（）問題使用jQuery Mobile

我試圖讓我的導航工作作爲一個下拉元素。.slideToggle（）問題使用jQuery Mobile

它完全切換，但我遇到的問題是，當我去一個新的'節ID'它顯示導航元素完全展開。

這是我目前在我的頭：

<script type="text/javascript"> 
$(document).ready(function(){ 
$('div#menuBar').hide(); 
$('a#menu').click(function(){ 
$('div#menuBar').slideToggle('fast'); 
    return false; 
    }); 
}); 
</script>

我的HTML結構：

<a id="menu" href="#">Menu</a> 
<div id="menuBar" data-role="navbar"> 
    <li><a href="#" data-transition="fade" data-role="button">Link</a></li> 
    <li><a href="#" data-transition="fade" data-role="button">Link</a></li> 
    <li><a href="#" data-transition="fade" data-role="button">Link</a></li> 
    <li><a href="#" data-transition="fade" data-role="button">Link</a></li> 
    <li><a href="#" data-transition="fade" data-role="button">Link</a></li> 
</div>

而且在我的CSS，我有：

#menuBar { 
    display:none; 
}

任何幫助非常感謝。

編輯我找到了一個解決方法，將特定的類名應用於鏈接和div被切換。這似乎與ajax調用有關，因爲它將內部頁面加載到同一個文檔中，從而與同名的div id產生衝突。這post也有助於指向我的解決方案，但在這一點上它似乎不理想。

來源

2011-11-22 Ian

可以調用.slideToggle()功能，當用戶點擊菜單項，使其復位菜單：

$('#menuBar').find('a').bind('click', function() { 
    $('#menuBar').slideToggle('fast'); 
});

我也注意到你可能要改變一些其他的東西：

由於您選擇的id是選擇對象的最快方式，因此您的jQuery選擇器不需要標記類型。更改：div#menuBar/a#menu至：#menuBar/#menu。
您的問題中的HTML缺少<li>標籤周圍的<ul>標籤。一個jQuery Mobile的導航欄應該是這種格式：<div data-role="navbar"><ul><li>...</li></ul></div>（http://jquerymobile.com/demos/1.0/docs/toolbars/docs-navbar.html）
因爲你是在同一範圍內多次使用相同的選擇，你可以緩存你的jQuery選擇並重新使用它：

。

<script type="text/javascript"> 
$(function(){ 
    var $menuBar = $('#menuBar'); 
    //$menuBar.hide();//this is not necessary if you have the CSS for the #menuBar element to `display: none;` 
    $('#menu').click(function(){ 
     $menuBar.slideToggle('fast'); 
     return false; 
    }); 
    $menuBar.find('a').bind('click', function() { 
     $menuBar.slideToggle('fast'); 
    }); 
}); 
</script>

--UPDATE--

可以改變上面的代碼一點，以適應使用類，而不是IDS：

<script type="text/javascript"> 
    $('.menu').live('click', function(){ 
     $.mobile.activePage.find('.menuBar').slideToggle('fast'); 
     //you can also select the proper `.menuBar` element like this: 
     //$(this).find('.menuBar').slideToggle('fast'); 
     return false; 
    }); 
    $('.menuBar').find('a').live('click', function() { 
     $.mobile.activePage.find('.menuBar').slideToggle('fast'); 
     //you can also select the proper `.menuBar` element like this: 
     //$(this).parents('.menuBar:first').slideToggle('fast'); 
    }); 
</script>

注：$.mobile.activePage是一個參考jQuery Mobile網站的當前頁面。知道這一點，我們只能在當前頁面找到與特定類匹配的DOM元素。

另請注意：我將.bind()調用更改爲.live()，以便在初始頁面加載後添加的元素仍將綁定到該元素。使用.live()意味着我們不需要等待document.ready觸發，以使我們的綁定，因此$(function() {...});是沒有必要的。

UPDATE

注意，在jQuery 1.7，.live()現在已經貶值。新的API是.on()，它可以通過多種方式使用，所以這裏的使用它就像.live()的例子：

$(document).on('click', ".menuBar a", function() { ... });

來源

2011-11-22 18:45:32 Jasper

碧玉，謝謝你，你的回答幫助，但我仍然有一個問題。我最終找到了一個解決方案，我編輯了我的原始文章。我是jQuery Mobile的框架全新的，所以我仍然不確定我是否正確接近它。 – Ian

@Ian我更新了我的答案，以顯示如何使用類而不是ID。 – Jasper

完美的作品，謝謝。 – Ian

在jQuery Mobile的空間，使用的文檔準備功能是無效的。改爲使用pageinit。其次jQuery的.Live功能已過時，並不會在最新版本的jq中工作。我在這裏沒有使用過這種方法，但是如果你需要使用它，請用.on函數替換它。第三，正如伊恩之前提到的，使用基於類的引用，基於id的引用似乎不適用於這種特殊情況。

使你的代碼看起來像這樣

// #page is id of my html page element, replace it with your page id. 

$(document).on('pageinit', '#page', function() { 

    $(".menu").click(function() { 

     $(".menuBar").slideToggle('fast'); 
     return false; 
    }); 

});

來源

2013-05-24 05:53:46 Atoosa

.slideToggle（）問題使用jQuery Mobile

回答

相關問題