切换不正常

Question

我有一个列表，它使用jquery关闭并打开以在slim和wide sidemenu之间切换。

问题是它现在切换每个菜单项而不是只有一个菜单项。现在它还可以切换家庭，工作，音乐和常见问题菜单。他们不应该切换。当用户点击“切换按钮开启”菜单类时，它应该只能切换，即在细长菜单和宽菜单之间切换。如何使用jquery执行此操作？真的很感谢你的帮助

<div>
  <ul class="nav" id="menu">
    <li>
      <a class="toggle-button-on"><i class="fa fa-exchange"></i></a>
    </li>
    <li>
      <a ui-sref="Home" ng-class="" data-toggle="tooltip" data-placement="right" data-original-title="Home">
        <i class="fa fa-home fa-3x"></i>
        <span>Home</span>
      </a>
    </li>
    <li>
      <a ng-class="">
        <i class="fa fa-bar-chart-o fa-3x" data-toggle="tooltip" data-placement="right" data-original-title="Work"></i>
        <span>Work </span>
      </a>
    </li>
    <li>
      <a ui-sref="Music" data-toggle="tooltip" data-placement="right" data-original-title="music">
        <i class="fa fa-table fa-3x"></i>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a ui-sref="faq">
        <i class="fa fa-faq fa-3x" data-toggle="tooltip" data-placement="right" data-original-title="faq"></i> 
        <span>Faq</span> 
      </a>
    </li>
  </ul>
</div>

    $(document).ready(function() {


                $("ul.nav#menu li ").click(function() {
                    $(this).toggleClass("toggle-button-on").find(".fa-3x").removeClass("fa-3x").addClass("fa-lg");
                });
                $(".nav#menu ").on("click", ".toggle-button-on", function() {
                    $(".toggle-button-on").toggleClass("toggle-button-on toggle-button-off");
                    $(".nav .fa-3x").toggleClass("fa-3x fa-lg");
                    $(".nav#menu .toggle-button").toggleClass("nav-slim");
                    $(".nav#menu li a i").css({
                        'font-size': '16px',
                        'line-height': '100px'
                    });
                    $(".nav#menu span").hide();
                    $("#menu .navbar-side").css("width", "64px");
                    $("#menu").css("width", "64px");
                    $("#content-panel ").css("margin-left", "100px");
 $(this).attr("data-original-title")).removeAttr("data-original-title");
                    // });


                });
                $(".nav#menu").on("click", ".toggle-button-off", function() {
                    $(".toggle-button-off").toggleClass("toggle-button-off toggle-button-on");
                    $(".nav .fa-lg").toggleClass("fa-lg fa-3x");
                    $(".nav#menu span").show();
                    $(".nav#menu li a i").css({
                        'font-size': '3em',
                        'line-height': ''
                    });
                    $("#menu .navbar-side").css("width", "");
                    $("#menu").css("width", "");
                    $("#content-panel ").css("margin-left", "");

                });

Answer 1

$(document).ready(function() {


             /*   $("ul.nav#menu li ").click(function() {
                    $(this).toggleClass("toggle-button-on").find(".fa-3x").removeClass("fa-3x").addClass("fa-lg");
                }); */
                $(".nav#menu ").on("click", ".toggle-button-on", function() {
                    $(".toggle-button-on").toggleClass("toggle-button-on toggle-button-off");
                    $(".nav .fa-3x").toggleClass("fa-3x fa-lg");
                    $(".nav#menu .toggle-button").toggleClass("nav-slim");
                    $(".nav#menu li a i").css({
                        'font-size': '16px',
                        'line-height': '100px'
                    });
                    $(".nav#menu span").hide();
                    $("#menu .navbar-side").css("width", "64px");
                    $("#menu").css("width", "64px");
                    $("#content-panel ").css("margin-left", "100px");
 $(this).removeAttr("data-original-title");
                    // });


                });
                $(".nav#menu").on("click", ".toggle-button-off", function() {
                    $(".toggle-button-off").toggleClass("toggle-button-off toggle-button-on");
                    $(".nav .fa-lg").toggleClass("fa-lg fa-3x");
                    $(".nav#menu span").show();
                    $(".nav#menu li a i").css({
                        'font-size': '3em',
                        'line-height': ''
                    });
                    $("#menu .navbar-side").css("width", "");
                    $("#menu").css("width", "");
                    $("#content-panel ").css("margin-left", "");

                });
  
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
  <ul class="nav" id="menu">
    <li>
      <a class="toggle-button-on"><i class="fa fa-exchange">toggle-button-on</i></a>
    </li>
    <li>
      <a ui-sref="Home" ng-class="" data-toggle="tooltip" data-placement="right" data-original-title="Home">
        <i class="fa fa-home fa-3x"></i>
        <span>Home</span>
      </a>
    </li>
    <li>
      <a ng-class="">
        <i class="fa fa-bar-chart-o fa-3x" data-toggle="tooltip" data-placement="right" data-original-title="Work"></i>
        <span>Work </span>
      </a>
    </li>
    <li>
      <a ui-sref="Music" data-toggle="tooltip" data-placement="right" data-original-title="music">
        <i class="fa fa-table fa-3x"></i>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a ui-sref="faq">
        <i class="fa fa-faq fa-3x" data-toggle="tooltip" data-placement="right" data-original-title="faq"></i> 
        <span>Faq</span> 
      </a>
    </li>
  </ul>
</div>