1

次の構造を持つアコーディオン jquery を作成したいのですが、次のような
HTML 構造があります。

<div id="tab">
    <div id="head">
      <ul>
         <li> header1 </li>
         <li> header2 </li>
      </ul>
    </div> <!-- head end -->
    <div id="content">
       <div> content1 </div>
       <div> content2 </div>
    </div> <!-- content end -->
</div> <!-- tab end -->

header1 をクリックする<li>と、 content1 が表示されます<div>。

しかし、jqueryアコーディオンは構造に従うだけです:

<div id="accordion">
  <h3>Section 1</h3>
  <div> content 1 </div>

  <h3>Section 2</h3>
  <div> content 2 </div>
</div> <!-- accordion -->

私を助けてください。ありがとうございました

4

3 に答える 3

1

あなたのhtmlによると：

<div id="tab">
  <div id="head">
    <ul>
        <li>header1</li>
        <li>header2</li>
    </ul>
  </div><!-- head end -->
  <div id="content">
    <div>content1</div>
    <div>content2</div>
  </div><!-- content end -->
</div><!-- tab end -->

このjQueryを試してください：

$('#head li').click(function () {
   var idx = $(this).index();
   $('#content div').eq(idx).slideToggle();
});

フィドルをチェックアウト

于 2013-02-19T06:48:08.740 に答える
1

まず、HTML に Jquery ライブラリを含める必要があります。次に、コードを次のように変更します。

<div id="tab">
    <div id="head">
      <ul>
         <li class='header1'> header1 </li>
         <li class='header2'> header2 </li>
      </ul>
    </div> <!-- head end -->
    <div id="content">
       <div class='content1' style="display:none"> content1 </div>
       <div class='content2' style="display:none"> content2 </div>
    </div> <!-- content end -->
</div>

次に、次のコードに従って、Jquery lib の後のどこかに配置します。

<script>
$(function(){
$('.header1').click(function(){
$('.content1').show();
$('.content2').hide();
});
$('.header2').click(function(){
$('.content2').show();
$('.content1').hide();
});
});
</script>
于 2013-02-19T06:26:26.183 に答える
0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        // <![CDATA[
        var myMenu;
        window.onload = function() {
            myMenu = new SDMenu("my_menu");
            myMenu.init();
        };
        // ]]>
    </script>
  </head>
 <body>
    <div style="float: left" id="my_menu" class="sdmenu">
      <div>
        <span>Business Unit</span>
        <html:link action="">Business Unit</html:link>
      </div>
      <div class="collapsed">
        <span>Sales Area Maintenance</span>
        <html:link action="">Sales Area1</html:link>
        <html:link action="">Sales Area2</html:link>
     </div>
    </div>

これを一度試してみてください....

于 2013-02-19T06:23:44.587 に答える