3

縦アコーディオンメニューで、メニュー内容を他のメニューや分割に差し替えたい。これは私のコードです

<nav>
  <ul id="nav">
    <li><a href="#">Menu 1</a>
           <div> New Menu 1</div> 
      <ul>
        After clicking on each header we will show/hide the internal navigation links. This situation can get tricky when trying to implement sub-navigation and sub-sub-navigation if you want to show/hide those as well. A better solution is to nest a third  element which is also displayed immediately with all the other links, but rendered using additional padding.


      </ul>
    </li>
    <li><a href="#">Menu 2</a>
         <div> New Menu 2</div>
      <ul>
        Create html drop down menus for web page navigation in a few clicks! Define text, font, color, URL and more for the multilevel dropdown menus. You don't need to write any code by yourself. Horizontal drop down menus builder will generate it for you. You can preview menus in web browser without quitting the program. Css drop down menus render perfectly in Firefox, Safari and Chrome. Html drop down menus also works on non-CSS3 compitable browsers
      </ul>
    </li>
    <li><a href="#">Menu 3</a>
         <div> New Menu 3</div>
      <ul>
        PURE CSS Menu Maker is a free and powerful graphical user interface for creating 100% pure CSS web menus. CSS menus do not require JavaScript or plug-ins in order to run. PURE CSS Menu Maker can create horizontal as well as vertical menus. Menus generated with PURE CSS Menu Maker may be modified freely, either with PURE CSS Menu Maker or by hand.
      </ul>
    </li>

  </ul>
</nav>

脚本

 $(document).ready(function()
{
  $('#nav > li > ul:eq(0)').show();
  $("#nav > li > a").on("click", function(e)
  {
    if($(this).parent().has("ul")) 
    {

        e.preventDefault();
    }

    if(!$(this).hasClass("open")) 
    {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);

      $("#nav li a").removeClass("open");


      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);

      $(this).addClass("open");

    }

    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

クリックすると、メニューを div で変更し、次のメニュー クリックでその div を非表示にします。それはどのように行うことができますか？ありがとう。

ここにフィドルがあります： http://jsfiddle.net/sW96K/

4

4 に答える 4

0

次のリンクを参照してください。さまざまな種類のアコーディオンを見つけることができます

http://jqueryui.com/accordion/
于 2013-07-09T10:59:41.210 に答える
0

あなたはこのようにしたいですか？小さなスクリプトでこれを処理できます。デモhttp://jsfiddle.net/yeyene/HmwN8/3/

$(document).ready(function(){
    $('a.toggle').on('click', function(){
        $('.content').slideUp('2000', "easeOutBounce");

        if($('div#'+$(this).attr('rel')).css('display')=='block')
            $('div#'+$(this).attr('rel')).slideUp('2000', "easeOutBounce");
        else
            $('div#'+$(this).attr('rel')).slideDown('2000', "easeOutBounce");
    });
});
于 2013-07-09T09:49:21.980 に答える
0

簡単な使用を試すことができますslideToggle()

           $(document).ready(function()
              {
                  $('#nav > li > ul:eq(0)').show();
                  $("#nav li a").on("click", function(e)
                     {
                         $(this).siblings("ul").slideToggle(350);
                     });
              });

このフィドルをチェックしてください：http://jsfiddle.net/Kritika/ZXE6K/

このコードは、1 つのメニュー onclick を開きますが、他の開いているメニューを閉じません。これは単純な非表示/表示
divです

于 2013-07-09T09:46:13.427 に答える