1

したがって、私はここ(デモはこちら) に示されている展開可能なリストを使用しています。これまでのところ、JavaScript コードでは、リストの直前の行がクリックされたときにリストを展開できます。<mystyle>word</mystyle>同じ行でも、同じ行でもなく、どこか別の行 (または単語、たとえば )divがクリックされたときに、リスト (すべてではなく 1 つだけ) を展開したいと思います。

これは JavaScript や CSS 操作で可能ですか? 私は専門家ではありませんが、これを解決したいと思っています。

編集1:これは、私が持っているものの本体の小さな実例です。読み込まれた JavaScript は、リンクされた Web サイトの「更新」セクションとまったく同じjquery-1.4.2.min.jsです。

<div style="width:350px">
<div id="listContainer"><ul id="expList">
<p align='center'>2011-06-28 - <a href="podcast.mp3"> Download</a> - <mystyle>Show/hide songs</mystyle>
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support this audio format.
</audio>
<li>List of songs<ul>
        <li>Song 1</li>
        <li>Song 2</li>
        <li>Song 3</li>
        <li>Song 4</li>
        <li>Song 5</li>
        <li>Song 6</li>
</ul></li></p>
</ul></div></div>

<mystyle>Show/hide songs</mystyle>基本的には、クリックしてクリックして登録できるようにしたいです<li>List of songs。

4

2 に答える 2

0

リンクしたページのコードを書き直すことで、これを構築できます。以下は既存のコードです。

function prepareList() {
  $('#expList').find('li:has(ul)')
    .click( function(event) {
      if (this == event.target) {
          $(this).toggleClass('expanded');
          $(this).children('ul').toggle('medium');
      }
      return false;
    })
   .addClass('collapsed')
   .children('ul').hide();
};

$(document).ready( function() {
  prepareList()
});

ulこれを読むと、クリックされた の子がli非表示または表示されていることがわかります。それを変更したい場合は、idのようなものを使用してこのロジックを書き直す必要があります。に を追加しdata-target="abc"、 jQuery コードにその値を読み取らせ、その値liを として開いたり閉じたりすることができます。すべての親も開いていることを確認する必要があります。そうしないと、もちろん何も起こらないことがわかりますulid

于 2013-05-03T23:33:04.837 に答える