仅将子菜单标题添加一次

Question

我有一个切换菜单，只显示切换图标。点击图标，它显示子菜单工作正常..它还将子菜单标题如菜单1，菜单2等附加到其各自的子菜单..后续点击它继续附加子菜单的标题..应该只追加子菜单标题一次。如果有人可以优化我的代码，我也会很感激。

$(document).ready(function() {

  $(".metismenu").metisMenu();



  var defaultActive = $('li.active').index()

  $(".main-content").addClass("big-menu");


  $("#toggle-btn").click(function() {

    $("#side-menu").toggleClass("flyout");

    $(".main-content").toggleClass("big-menu");

    $("ul.nav-second-level").removeClass("db");

    if (!$("#side-menu").hasClass("flyout")) {

      $(".head-text").hide();

      $(".has-arrow").removeClass("hide-arrow");


      $("#side-menu > li").eq(defaultActive).addClass("active");
      $("#side-menu > li").eq(defaultActive).siblings().removeClass("active");

      $("#side-menu > li").eq(defaultActive).find("a").attr("aria-expanded", "true");
      $("#side-menu > li").eq(defaultActive).find("ul").attr("aria-expanded", "true").addClass("in").removeAttr("style");

      $("#side-menu > li").eq(defaultActive).siblings().find("a").attr("aria-expanded", "false");
      $("#side-menu > li").eq(defaultActive).siblings().find("ul").removeClass("in");

      $("#side-menu .menu-label").show();
      $(".has-arrow").removeClass("hide-arrow");
      $(".sidebar-collapse").removeClass("tiny");

      $("#side-menu .menu-label + i").css("font-size", "14px");

    }


    if ($("#side-menu").hasClass("flyout")) {




      //$('#side-menu > li > a').on('click', function(){

      //$(".head-text").remove();

      //var menuLabel = $(this).find(".menu-label").text();


      //$(this).parent().find(".nav-second-level").prepend('<li class="head-text">'+menuLabel+'</li>');


      //});


      $(".sidebar-collapse").addClass("tiny");
      $("#side-menu .menu-label").hide();
      $(".has-arrow").addClass("hide-arrow");

      $("#side-menu i").css("font-size", "20px");

    } else {

      $("#side-menu i").css("font-size", "inherit");

    }


  });


  $("#side-menu > li > a").on("click", function() {


    if (($(this).next().hasClass("nav-second-level")) && ($("#side-menu").hasClass("flyout"))) {

      $(this).next().toggleClass("db");

      $(this).parent().siblings().find("ul.nav-second-level").removeClass("db");

      var menuLabel = $(this).find(".menu-label").text();


      $(this).parent().find(".nav-second-level").prepend('<li class="head-text">' + menuLabel + '</li>');





    }


    if (($("#side-menu > li > ul").hasClass("in")) && ($("#side-menu").hasClass("flyout"))) {

      $(".nav-second-level").removeClass("db");
      $("#side-menu > li").removeClass("active");
      $(".nav-second-level").removeClass("in");
      $("#side-menu > li > a").attr("aria-expanded", "false");
      $(".nav-second-level").attr("aria-expanded", "false");


    }


  });

  $(".nav-second-level > li > a ").click(function(e) {
    e.stopPropagation();


    var contentHeight = $(".container").outerHeight();
    $(document).ready(function() {
      $(".sidebar-collapse").css('min-height', contentHeight);
    });


  });


  // run test on initial page load
  checkSize();

  // run test on resize of the window
  $(window).resize(checkSize);


});


//Function to the css rule
function checkSize() {
  if ($(".sidebar-collapse").css("display") == "none") {
    // your code here

    $(".sidebar-collapse").hide();

    $(".main-content").addClass("menu-none");


    $('#toggle-btn-mobile').on('click', function() {

      $(".sidebar-collapse").toggle("fast");


    });

  }
}

请检查我为菜单

创建的JSfiddle

https://jsfiddle.net/uumdqL6q/2/

Answer 1

如果您只想追加，则需要检查附加元素是否已经存在。在这里，我更新了小提琴。code here Jsfiddle link

$(document).ready(function() {

  $(".metismenu").metisMenu();



  var defaultActive = $('li.active').index()

  $(".main-content").addClass("big-menu");


  $("#toggle-btn").click(function() {

    $("#side-menu").toggleClass("flyout");

    $(".main-content").toggleClass("big-menu");

    $("ul.nav-second-level").removeClass("db");

    if (!$("#side-menu").hasClass("flyout")) {

      $(".head-text").hide();

      $(".has-arrow").removeClass("hide-arrow");


      $("#side-menu > li").eq(defaultActive).addClass("active");
      $("#side-menu > li").eq(defaultActive).siblings().removeClass("active");

      $("#side-menu > li").eq(defaultActive).find("a").attr("aria-expanded", "true");
      $("#side-menu > li").eq(defaultActive).find("ul").attr("aria-expanded", "true").addClass("in").removeAttr("style");

      $("#side-menu > li").eq(defaultActive).siblings().find("a").attr("aria-expanded", "false");
      $("#side-menu > li").eq(defaultActive).siblings().find("ul").removeClass("in");

      $("#side-menu .menu-label").show();
      $(".has-arrow").removeClass("hide-arrow");
      $(".sidebar-collapse").removeClass("tiny");

      $("#side-menu .menu-label + i").css("font-size", "14px");

    }


    if ($("#side-menu").hasClass("flyout")) {


$(".head-text").show();

      //$('#side-menu > li > a').on('click', function(){

      //$(".head-text").remove();

      //var menuLabel = $(this).find(".menu-label").text();


      //$(this).parent().find(".nav-second-level").prepend('<li class="head-text">'+menuLabel+'</li>');


      //});


      $(".sidebar-collapse").addClass("tiny");
      $("#side-menu .menu-label").hide();
      $(".has-arrow").addClass("hide-arrow");

      $("#side-menu i").css("font-size", "20px");

    } else {

      $("#side-menu i").css("font-size", "inherit");

    }


  });


  $("#side-menu > li > a").on("click", function() {


    if (($(this).next().hasClass("nav-second-level")) && ($("#side-menu").hasClass("flyout"))) {

      $(this).next().toggleClass("db");

      $(this).parent().siblings().find("ul.nav-second-level").removeClass("db");



if( $(this).parent().find(".nav-second-level").find("li.head-text").length  < 1){
      var menuLabel = $(this).find(".menu-label").text();


      $(this).parent().find(".nav-second-level").prepend('<li class="head-text">' + menuLabel + '</li>');


}


    }


    if (($("#side-menu > li > ul").hasClass("in")) && ($("#side-menu").hasClass("flyout"))) {

      $(".nav-second-level").removeClass("db");
      $("#side-menu > li").removeClass("active");
      $(".nav-second-level").removeClass("in");
      $("#side-menu > li > a").attr("aria-expanded", "false");
      $(".nav-second-level").attr("aria-expanded", "false");


    }


  });

  $(".nav-second-level > li > a ").click(function(e) {
    e.stopPropagation();


    var contentHeight = $(".container").outerHeight();
    $(document).ready(function() {
      $(".sidebar-collapse").css('min-height', contentHeight);
    });


  });


  // run test on initial page load
  checkSize();

  // run test on resize of the window
  $(window).resize(checkSize);


});


//Function to the css rule
function checkSize() {
  if ($(".sidebar-collapse").css("display") == "none") {
    // your code here

    $(".sidebar-collapse").hide();

    $(".main-content").addClass("menu-none");


    $('#toggle-btn-mobile').on('click', function() {

      $(".sidebar-collapse").toggle("fast");


    });

  }
}

.metismenu .arrow {
  float: right;
  line-height: 1.42857;
}

*[dir=rtl] .metismenu .arrow {
  float: left;
}


/*
 * Require Bootstrap 3.x
 * https://github.com/twbs/bootstrap
*/

.metismenu .glyphicon.arrow:before {
  content: "\e079";
}

.metismenu .active > a > .glyphicon.arrow:before {
  content: "\e114";
}


/*
 * Require Font-Awesome
 * http://fortawesome.github.io/Font-Awesome/
*/

.metismenu .fa.arrow:before {
  content: "\f104";
}

.metismenu .active > a > .fa.arrow:before {
  content: "\f107";
}


/*
 * Require Ionicons
 * http://ionicons.com/
*/

.metismenu .ion.arrow:before {
  content: "\f3d2"
}

.metismenu .active > a > .ion.arrow:before {
  content: "\f3d0";
}

.metismenu .plus-times {
  float: right;
}

*[dir=rtl] .metismenu .plus-times {
  float: left;
}

.metismenu .fa.plus-times:before {
  content: "\f067";
}

.metismenu .active > a > .fa.plus-times {
  transform: rotate(45deg);
}

.metismenu .plus-minus {
  float: right;
}

*[dir=rtl] .metismenu .plus-minus {
  float: left;
}

.metismenu .fa.plus-minus:before {
  content: "\f067";
}

.metismenu .active > a > .fa.plus-minus:before {
  content: "\f068";
}

.metismenu .collapse {
  display: none;
}

.metismenu .collapse.in {
  display: block;
}

.metismenu .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition-timing-function: ease;
  transition-duration: .35s;
  transition-property: height, visibility;
}

.metismenu .has-arrow {
  position: relative;
}

.metismenu .has-arrow::after {
  position: absolute;
  content: '';
  width: .5em;
  height: .5em;
  border-width: 1px 0 0 1px;
  border-style: solid;
  border-color: initial;
  right: 1em;
  transform: rotate(-45deg) translate(0, -50%);
  transform-origin: top;
  top: 50%;
  transition: all .3s ease-out;
}

*[dir=rtl] .metismenu .has-arrow::after {
  right: auto;
  left: 1em;
  transform: rotate(135deg) translate(0, -50%);
}

.metismenu .active > .has-arrow::after,
.metismenu .has-arrow[aria-expanded=true]::after {
  transform: rotate(-135deg) translate(0, -50%);
}

html,
body,
.container {
  height: 100%;
}

.sidebar-collapse {
  min-height: 100%;
  display: block;
}

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.flyout > li {
  position: relative;
  display: block;
  text-align: center;
}

.flyout > li:first-child {
  padding-top: 25px !important;
}

.flyout > li:first-child > .nav.nav-second-level {
  top: 25px;
}

.flyout > li > .nav.nav-second-level {
  position: absolute;
  left: 40px;
  top: 0;
  margin: 0;
  padding: 0;
  display: none;
  width: 250px;
  text-align: left;
  background: #ececec;
}

.db {
  display: block !important;
}

.metismenu .has-arrow {
  display: block;
}

.hide-arrow.has-arrow::after {
  border: 0;
}

#side-menu li {
  padding: 5px 0;
}

.sidebar-collapse {
  width: 250px;
  padding: 20px;
  background-color: #ccc;
}

.sidebar-collapse.tiny {
  width: 60px;
}

#side-menu li i {
  color: #fff;
}

.big-menu {
  padding-left: 250px;
}

.menu-none {
  padding-left: 0;
}

#side-menu li.head-text {
  padding-left: 10px;
}

<div class="container">


  <a href="javascript:;" id="toggle-btn"><i class="fa fa-bars"></i></a>




  <div class="sidebar-collapse pull-left">


    <ul class="metismenu" id="side-menu">
      <li>
        <a class="has-arrow" href="#" aria-expanded="false"><i class="fa fa-bank"></i> <span class="menu-label">Menu 1</span></a>
        <ul class="nav nav-second-level" aria-expanded="false">
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
          <li><a href="#">link 4</a></li>
          <li><a href="#">link 5</a></li>

        </ul>
      </li>
      <li class="active">
        <a class="has-arrow" href="#" aria-expanded="true"><i class="fa fa-address-book"></i> <span class="menu-label">Menu 2</span></a>
        <ul class="nav nav-second-level" aria-expanded="true">
          <li><a href="#">link A</a></li>
          <li><a href="#">link B</a></li>
          <li><a href="#">link C</a></li>
          <li><a href="#">link D</a></li>
          <li><a href="#">link E</a></li>



        </ul>
      </li>

      <li>
        <a class="has-arrow" href="#" aria-expanded="false"><i class="fa fa-anchor"></i> <span class="menu-label">Menu 3</span></a>
        <ul class="nav nav-second-level" aria-expanded="false">
          <li><a href="#">link F</a></li>
          <li><a href="#">link G</a></li>
          <li><a href="#">link H</a></li>
          <li><a href="#">link I</a></li>
          <li><a href="#">link J</a></li>
        </ul>
      </li>




    </ul>



  </div>






  <div class="main-content">

    udwudw dwubdw ubdwudw

  </div>



</div>