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 回答