1

jquerymobileサイトをセットアップしようとしていますが、フロントページのアコーディオンメニューに少し問題があります。jquerymobileを使用しないアコーディオンの実例を次に示します。http：//dl.dropbox.com/u/ 22874377 / Mobile / accordion.htmlですが、jquerymobileと一緒に使用すると、次のように機能しません：http ://dl.dropbox.com/u/22874377/Mobile/app.html

アコーディオンとして設定したとしても、jquerymobileからのページ遷移を強制し、別のページに含まれているかのように子リストアイテムを読み込もうとします。

なぜこれが起こるのかについてのアイデアはありますか？またはそれを回避するために私ができることは何ですか？

実例を見たくない場合の簡単なスクリプトは次のとおりです

<style>
#nav li ul {
display: none; // used to hide sub-menus
}
</style>
<script>
$(document).ready(function () {
  var checkCookie = $.cookie("nav-item");
  if (checkCookie != "") {
    $('#nav > li > a:eq('+checkCookie+')').next().show();
  }
  $('#nav > li > a').click(function(){
      var navIndex = $('#nav > li > a').index(this);
      $.cookie("nav-item", navIndex);
      $('#nav li ul').slideUp();
       if ($(this).next().is(":visible")){
       $(this).next().slideUp();
       } else {
       $(this).next().slideToggle();
       }
   });
}); 
</script>
<ul id="nav" data-role="listview" data-inset="true">
                <li data-theme="c">
                    <a href="#home" data-transition="flip">
                        Home
                    </a>
                </li>
                <li data-theme="c" data-icon="arrow-d">
                    <a href="#">
                        Info
                    </a>
                    <ul>
                    <li data-theme="c"><a href="#" data-transition="flip">About Katie</a></li>
                    <li data-theme="c"><a href="#" data-transition="flip">Availability</a></li>
                    <li data-theme="c"><a href="#" data-transition="flip">Pricing</a></li>
                    <li data-theme="c"><a href="#" data-transition="flip">Contact</a></li>
                    <li data-theme="c"><a href="#" data-transition="flip">Downloads</a></li>
                    <li data-theme="c"><a href="#home" data-transition="flip">Back to Home</a></li>
                    </ul>
                </li>
                <li data-theme="c">
                    <a href="#home" data-transition="flip">
                        Galleries
                    </a>
                </li>
                <li data-theme="c" data-icon="arrow-d">
                    <a href="#home" data-transition="flip">
                        Client Proofs
                    </a>
                    <ul>
                    <li data-them="c"><a href="#" data-transition="flip">Monica &amp; Andrew's Excellent Wedding</a></li>
                    <li data-theme="c"><a href="#home" data-transition="flip">Back to Home</a></li>
                    </ul>
                </li>
                <li data-theme="c">
                    <a href="#home" data-transition="flip">
                        Testimonials
                    </a>
                </li>
            </ul>
4

2 に答える 2

0

ここに問題があります

$(document).ready(function () {
 $('#nav > li > a').click(function(){
  if ($(this).attr('class') != 'active'){
  $('#nav li ul').slideUp();
  $(this).next().slideToggle();
 }

}）;

ドキュメントは引用符で囲む必要があります

$('document').ready(function () {
于 2012-07-30T17:34:53.393 に答える
0

すばやく、例のさまざまなリンク要素を調べるだけで、href属性としてhome＆ui-page = nav-（数値）があり、新しいページが開くことがわかります：... Mobile / app.html＃ home＆ui-page = nav-0

これが新しいページで開く理由です。サイトをナビゲートするために使用することはなく、単に上下のスライドをアクティブにするために使用するため、href属性は空（または＃）にする必要があります...

（なぜ彼らがこれを取得するのかについては、おそらくあなたの自動UIのためです...しかし私はそこであなたを助けることはできません）

于 2012-07-30T17:35:36.957 に答える