0

Java / JSP を使用して Web サイト全体を作成していますが、zurb Foundation も使用しています。

$(document).foundation(); を呼び出す必要があることがわかりました。基礎を機能させるためですが、画面を切り替えるためにajaxを使用しているため（ページを切り替えるときに白い画面のフラッシュ効果はありません）、ホームページを開くとそのメソッドが実行されます（$（document）.foundation（ );) そして、すべてがうまく見えます。

問題は、私が持っているトップ ナビゲーション バーで発生します。モバイル版に移行すると、右側にメニュー ボタンが表示され、サブカテゴリを切り替えると、親カテゴリに戻るための [戻る] ボタンが表示されます。

問題は、(ajax を使用して) 次のページを開くと始まります。現在、そこにはコンポーネント、つまりコンポーネントがあります。実際、これらは、通常の標準の html よりも基盤上で見栄えがします。$(document).foundation(); を実行すると 繰り返しますが、コンポーネントはFoundationスタイルのコンポーネントに入りますが、上部のナビゲーションバーには2つの戻るボタンがあり、戻るボタンの機能も台無しになります。つまり、壊れます。もう一度画面に移動すると、別の戻るボタンなどが追加されます。

何らかの方法でfoundation()メソッドを元に戻し、再度呼び出して更新する方法はありますか?

これは私のトップ ナビゲーション バーです。

<div class='fixed contain-to-grid' style='height:67px;'>
<div class='large-12 columns' id='topNav'>
<nav class='top-bar'>
<ul class='title-area'>
<!-- Title Area -->
<li class='name'>
<h1><a href='#'><img src='img/logoLeft.png' style="width:181px;" id='logo'/></a></h1>
</li>
<!-- Remove the class 'menu-icon' to get rid of menu icon. Take out 'Menu' to just have    icon alone -->
<li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>
</ul>

<section class='top-bar-section'>
<ul class="left">
<li class="divider" id='div1' style='display:none;'></li>
<li class="has-dropdown" id='nonFinNav' style='display:none;'><a href="#">Non-Financial</a>
<ul class="dropdown">
<li><label>Heading 1</label></li>
<li><a href="#">Cat 1</a></li>
<li class="divider"></li>
<li><a href="#">Cat 2</a></li>
<li class="divider"></li>
<li><a href="#">Cat 3</a></li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#" id='leaveMain'>Cat 4</a>
<ul class="dropdown">
<li><label>Leave</label></li>
<li><a href="#" id="leaveApplicationLink">SubCat 1</a></li>
<li class="divider"></li>
<li><a href="#">SubCat 2</a></li>
<li class="divider"></li>
<li><a href="#">SubCat 3</a></li>
<li class="divider"></li>
</ul></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div2' style='display:none;'></li>
<li class="has-dropdown" id='FinNav' style='display:none;'><a href="#" style='margin-   right:29px;'>Financial</a>
<ul class="dropdown">
<li><label>Heading 2</label></li>
<li><a href="#">Cat 1</a></li>
<li class="divider"></li>
<li><a href="#">Cat 2</a></li>
<li class="divider"></li>
<li><a href="#">Cat 3</a></li>
<li class="divider"></li>
<li><a href="#">Cat 4</a></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div3' style='display:none;'></li>
</ul>
<!-- Right Nav Section -->
<ul class='right'>
<li><a id='logOffButton' style='display:none;'>Log Off</a></li>
<li class='divider'></li>
<li><a id='helpButton'>Help</a></li>
<li class='divider'></li>
</ul>
</section>
</nav>
</div>
</div>

さらに情報が必要な場合は、お問い合わせください。返信いたします。

ありがとう。

4

2 に答える 2

2

私は同じ問題を抱えています。ファンデーションで解決策を見つけることはできませんでしたが、自分の目的に適したものを思いつきました.

まず、単に $(document).foundation() を実行する代わりに、実行します

$(document).foundation({topbar : {custom_back_text: false }});

これにより、「戻る」ボタンの名前が以前のメニューにちなんで付けられるようになりました。したがって、各戻るボタンのタイトルは一意である必要があります。それらがユニークであることが重要です。これで、リンク テキストに基づいて、重複するメニュー項目をすべて削除するスクリプトができました。誰かがサブアイテムを含むメニューアイテムをクリックするたびにトリガーするように設定しました（ファンデーションは、これらに「has-dropdown not-click」のクラスを与えます）。このようにして、スクリプトは本当に必要な場合にのみ実行されます。

function (){
    var uniqueBackButtons = [];
    $.each($('.back'), function(){
        if(uniqueBackButtons.indexOf(this.childNodes[0].childNodes[0].childNodes[0].data) == -1){
            uniqueBackButtons.push(this.childNodes[0].childNodes[0].childNodes[0].data);
        }
        else{
            $(this).remove();
        }
    });
}
于 2013-11-29T05:34:54.957 に答える
1

私も同じ問題を抱えています。

複数の「戻る」ボタンがあるのは、このコードが複数宣言されているためだと思います。

 $(document).foundation();

これを埋め込んだことに注意してください

<script src="js/app.js"></script>

そのスクリプトも含まれています。それは私に働きます。すべてのスクリプトを js/app.js に配置しました

于 2013-12-05T19:46:07.117 に答える