1

ここで折りたたみメニューに行き詰まっています。

私は、私が望んでいることを正確に実行するスクリプトを手に入れることができましたが、その逆です。スクリプトでは、リンクはデフォルトで「展開」されています。リンクをデフォルトで縮小して、クリックすると拡大するようにしたい。

どんな助けでも本当に感謝します! ありがとう ：）

.show {
  display: none;
}

.hide:focus + .show {
  display: inline;
}

.hide:focus {
  display: none;
}

.hide:focus ~ #list {
  display: none;
  list-style-type:none;
}

@media print {
  .hide, .show {
    display: none;
  }
}
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
  </head>
  <body>

    <p>Lorem ipsum...</p>
    <div>
      <a href="#" class="hide">[Link]</a>
      <a href="#" class="show">[Link]</a>
      <ol id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ol>
    </div>

  </body>
</html>

4

4 に答える 4

3

私はあなたを正しく理解したと思います。私は通常これに jquery を使用します... ここに小さなデモがあります: http://cssdeck.com/labs/omya4ax9 HTML:

<a href="#" class="hide" data-toggle="#list">Toggle: show</a>
<ol id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>

CSS:

#list {
  display: none;
}

#list.open {
  display: block;  
}

JS:

$('[data-toggle]').on('click', function(){
  var id = $(this).data("toggle"),
      $object = $(id),
      className = "open";

  if ($object) {
    if ($object.hasClass(className)) {
      $object.removeClass(className)
      $(this).text("Toggle: show");
    } else {
      $object.addClass(className)
      $(this).text("Toggle: hide");
    }
  }
});

TJL

于 2013-08-08T10:03:06.490 に答える
0

この単純な Javascript ソリューションをご覧になることをお勧めします。

コンポーネントをクリックして特定の要素の表示モードと折りたたみモードを切り替えると、メソッドを呼び出すことができます。

Javascript の例:

function toggle(elementId) {
    var ele = document.getElementById(elementId);
    if(ele.style.display == "block") {
        ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
    }
}

このメソッドは、 hrefまたはonclickイベントで呼び出すことができます。

元の投稿: snip2code - html で div を折りたたむ方法

于 2014-01-08T20:56:21.857 に答える