3

私は、その場でスクロールして他のアイテムを展開するためにそれ自体を呼び出すことができる折りたたみ可能なアイテムのリストを作成しています。このための撮影...

ハイパーリンクを選択する前。 ここに画像の説明を入力

選択後。 ここに画像の説明を入力

3 番目のアイテムの段落内のリンクが選択されたときに、最初の折りたたまれたアイテムを展開するにはどうすればよいですか?

私が得たもの：上記の例に折りたたまれたアイテムがさらにある場合、以下のコードはWebページを目的の折りたたみ可能なアイテムにスクロールします（ソリューションの半分）。

<!DOCTYPE html>
<html>
    <head>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
    <div>
        <ul class="collapsible" data-collapsible="accordion">
            <li>
              <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i><a name="987"/>First</a></div>
              <div class="collapsible-body"><p>Hello StackOverflow! SO's da' bomb diggidy!</p></div>
            </li>
            <li>
              <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
              <div class="collapsible-body"><p>Why is the person who invests your money called a broker?</p></div>
            </li>
            <li>
              <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
              <div class="collapsible-body"><p>I'd like to <a href="#987">open the First collapsible element</a> in this list.</p></div>
            </li>
        </ul>
    </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>
4

1 に答える 1

11

.collapsible-headerアンカーの html コードを少し変更して、最初の項目でクリック イベントをトリガーするだけです。

$('[data-click]').on('click', function (e) {
    $( $(this).data('click') ).trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/>

<div>
    <ul class="collapsible" data-collapsible="accordion">
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>First</div>
            <div class="collapsible-body">
                <p>Hello StackOverflow! SO's da' bomb diggidy!</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
            <div class="collapsible-body">
                <p>Why is the person who invests your money called a broker?</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
            <div class="collapsible-body">
                <p>I'd like to <a href="#" data-click=".collapsible .collapsible-header:first">open the First collapsible element</a> in this list.</p>
            </div>
        </li>
    </ul>
</div>

同じコードがFiddleにもあります。

n 番目の要素をターゲットにしたい場合は、jQuery :eq() セレクター(ゼロベース) を使用できます。たとえば、3 番目のアイテムをターゲットにするには、'.collapsible-header:eq(2)'セレクターを使用します。

あなたがSEOを気にしているなら（そしてそうすべきです）、あなたのリンクは正しいhref. この場合、.collapsible_header要素に一意の ID を追加し、わずかに異なるスクリプトを使用してそれを悪用します。

$('[data-click]').on('click', function (e) {
    $( $(this).attr('href') ).trigger('click');
});

ターゲット項目は次のとおりです。

<div id="about_stackoverflow" class="collapsible-header">

有効なローカル リンクは次のとおりです。

<a href="#about_stackoverflow" title="Click to open first item" data-click="true">open the First collapsible element</a>

この Fiddleで動作していることがわかります。(最後のアンカーは同じページのどこにでもあるかもしれません)

于 2015-03-25T01:37:33.587 に答える