0

メニュー用にコンテンツが折りたたまれた単一ページのデザインを作成しています。この折りたたまれたコンテンツにはブートストラップ メニューを使用していません。ahref 要素のコンテンツを表示するために ahref を使用しているだけです。

問題は、クリックしたばかりの最近のリンクのコンテンツが表示され続けることです。

ライブサイトはこちら

現在機能しているリンクは「Webdesign」と「Profil」のみであることに注意してください。

統合しようとしたスクリプトは次のようになります。

<script> 
$('a#home-box-blog [data-toggle=collapse]').on('click', function (e) {
$('.collapse').not($(this).data("target")).collapse('hide');
});

$('a#home-box-cultivatr [data-toggle=collapse]').on('click', function (e) {
$('.collapse').not($(this).data("target")).collapse('hide');
});
</script>

編集：これも試しました：

$("[data-toggle^='collapse']").on('click', function (e) {
$('.collapse').not($(this).data("target")).collapse('hide');

これを実現するために私が間違っていることを理解できれば。

4

1 に答える 1

1

このコードを使用してください：

<script>
$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });
</script>

.nav aと.navbar-to-collapseを目的の変数に変更したり、各変数の間に< , >を使用するだけでさらに変数を追加したりできます。

より多くの説明:

  1. .nav aは、クリックでターゲットにする変数です。この例では、 navクラスの下のリンクです。クラスではなく ID を使用してリンクをターゲットにするように変更できます。

    $('#nav a')

  2. .navbar-to-collapseはdata-target= ".navbar-to-collapse"の値であり、使用する data-target に変更できます。

したがって、完全な例（説明用）は次のようになります。

<header><!-- /Navigation-Bar Container-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-to-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="icon-menu"></i>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-to-collapse">
        <ul class="nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
  </div><!-- /.navbar-collapse -->
</div>
</nav>

スクリプトを使用します：

<script>
$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });
</script>

それがあなたを助けることを願っています

于 2013-10-01T00:09:52.960 に答える