堆栈内存溢出
  繁体   English   中英

如何在jquery中添加这个元素

[英]How to add this element in jquery

 原文  2015-09-30 07:16:57  1   3    javascript/ jquery/ html/ css

问题描述

我正在制作一个程序，其中我需要多个手风琴菜单，例如 100 多个，但只有首先才能正常工作。 我知道这可以用 jquery 中的这个选择器解决，但我在 jquery 中很新，所以我不知道如何添加这个元素。

手风琴菜单是从互联网上复制的，其中一个菜单被打开，其他菜单已经变为非活动（关闭）。 在我的情况下，只有最顶层的菜单正常工作，而不是其他

我的编码 HTML

<div id='cssmenu'>
<ul>

   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
         <li class='last'><a href='#'><span>Product 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>About</span></a>
      <ul>
         <li><a href='#'><span>Company</span></a></li>

      </ul>
   </li>

</ul>
  </div>
<br><br>
<div id='cssmenu'>
<ul>

   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
         <li class='last'><a href='#'><span>Product 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>About</span></a>
      <ul>
         <li><a href='#'><span>Company</span></a></li>

      </ul>
   </li>

</ul>
  </div>
    <br><br>
<div id='cssmenu'>
<ul>

   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
         <li class='last'><a href='#'><span>Product 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>About</span></a>
      <ul>
         <li><a href='#'><span>Company</span></a></li>

      </ul>
   </li>

</ul>
  </div>

css：

@import url(http://fonts.googleapis.com/css?family=Lato);
@charset "UTF-8";
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
  padding: 6px 15px;
}
#cssmenu {
  width: 200px;
}
#cssmenu > ul > li {
  cursor: pointer;
  background: #000;
  border-bottom: 1px solid #4c4e53;
}
#cssmenu > ul > li:last-child {
  border-bottom: 1px solid #3e3d3c;
}
#cssmenu > ul > li > a {
  font-size: 13px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background: #64676e;
  background: -moz-linear-gradient(#64676e 0%, #4c4e53 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #64676e), color-stop(100%, #4c4e53));
  background: -webkit-linear-gradient(#64676e 0%, #4c4e53 100%);
  background: linear-gradient(#64676e 0%, #4c4e53 100%);
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  background: #97c700;
  background: -moz-linear-gradient(#97c700 0%, #709400 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97c700), color-stop(100%, #709400));
  background: -webkit-linear-gradient(#97c700 0%, #709400 100%);
  background: linear-gradient(#97c700 0%, #709400 100%);
  color: #4e5800;
  text-shadow: 0 1px 1px #709400;
}
#cssmenu > ul > li.has-sub > a:after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  border: 5px solid transparent;
  border-left: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub.active > a:after {
  right: 14px;
  top: 12px;
  border: 5px solid transparent;
  border-top: 5px solid #4e5800;
}
/* Sub menu */
#cssmenu ul ul {
  padding: 0;
  display: none;
}
#cssmenu ul ul a {
  background: #efefef;
  display: block;
  color: #797979;
  font-size: 13px;
}
#cssmenu ul ul li {
  border-bottom: 1px solid #c9c9c9;
}
#cssmenu ul ul li.odd a {
  background: #e5e5e5;
}
#cssmenu ul ul li:last-child {
  border: none;
}

查询

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active'); 
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }     
});
});
} )( jQuery );

js 小提琴https://jsfiddle.net/ru5L5cLg/

3 个解决方案

解决方案1
 1 已采纳  2015-09-30 07:35:40

而不是$('#cssmenu li').removeClass('active'); , 使用$(this).closest('#cssmenu').find('li').removeClass('active');

同样代替$('#cssmenu ul ul:visible').slideUp('normal'); , 使用$(this).closest('#cssmenu').find('ul ul:visible').slideUp('normal');

通过像这样使用它，一个手风琴菜单不会干扰另一个

(function ($) {
    $(document).ready(function () {
        $('#cssmenu ul ul li:odd').addClass('odd');
        $('#cssmenu ul ul li:even').addClass('even');
        $('#cssmenu > ul > li > a').click(function () {
            $(this).closest('#cssmenu').find('li').removeClass('active');
            $(this).closest('li').addClass('active');
            var checkElement = $(this).next();
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                $(this).closest('li').removeClass('active');
                checkElement.slideUp('normal');
            }
            if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $(this).closest('#cssmenu').find('ul ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            }
            if ($(this).closest('li').find('ul').children().length == 0) {
                return true;
            } else {
                return false;
            }
        });
    });
})(jQuery);

js小提琴

解决方案2
 0  2015-09-30 07:28:05

将 ID 更改为类

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);
@charset "UTF-8";
/* Base Styles */
.cssmenu,
.cssmenu ul,
.cssmenu li,
.cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  position: relative;
}
.cssmenu a {
  line-height: 1.3;
  padding: 6px 15px;
}
.cssmenu {
  width: 200px;
}
.cssmenu > ul > li {
  cursor: pointer;
  background: #000;
  border-bottom: 1px solid #4c4e53;
}
.cssmenu > ul > li:last-child {
  border-bottom: 1px solid #3e3d3c;
}
.cssmenu > ul > li > a {
  font-size: 13px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background: #64676e;
  background: -moz-linear-gradient(#64676e 0%, #4c4e53 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #64676e), color-stop(100%, #4c4e53));
  background: -webkit-linear-gradient(#64676e 0%, #4c4e53 100%);
  background: linear-gradient(#64676e 0%, #4c4e53 100%);
}
.cssmenu > ul > li > a:hover {
  text-decoration: none;
}
.cssmenu > ul > li.active {
  border-bottom: none;
}
.cssmenu > ul > li.active > a {
  background: #97c700;
  background: -moz-linear-gradient(#97c700 0%, #709400 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97c700), color-stop(100%, #709400));
  background: -webkit-linear-gradient(#97c700 0%, #709400 100%);
  background: linear-gradient(#97c700 0%, #709400 100%);
  color: #4e5800;
  text-shadow: 0 1px 1px #709400;
}
.cssmenu > ul > li.has-sub > a:after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  border: 5px solid transparent;
  border-left: 5px solid #ffffff;
}
.cssmenu > ul > li.has-sub.active > a:after {
  right: 14px;
  top: 12px;
  border: 5px solid transparent;
  border-top: 5px solid #4e5800;
}
/* Sub menu */
.cssmenu ul ul {
  padding: 0;
  display: none;
}
.cssmenu ul ul a {
  background: #efefef;
  display: block;
  color: #797979;
  font-size: 13px;
}
.cssmenu ul ul li {
  border-bottom: 1px solid #c9c9c9;
}
.cssmenu ul ul li.odd a {
  background: #e5e5e5;
}
.cssmenu ul ul li:last-child {
  border: none;
}

查询

  ( function( $ ) {
$( document ).ready(function() {
$('.cssmenu ul ul li:odd').addClass('odd');
$('.cssmenu ul ul li:even').addClass('even');
$('.cssmenu > ul > li > a').click(function() {
  $('.cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active'); 
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('.cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }     
});
});
} )( jQuery );

HTML

<div class='cssmenu'>
<ul>

   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
         <li class='last'><a href='#'><span>Product 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>About</span></a>
      <ul>
         <li><a href='#'><span>Company</span></a></li>

      </ul>
   </li>

</ul>
  </div>
<br><br>
<div class='cssmenu'>
<ul>

   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
         <li class='last'><a href='#'><span>Product 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>About</span></a>
      <ul>
         <li><a href='#'><span>Company</span></a></li>

      </ul>
   </li>

</ul>
  </div>

链接 - https://jsfiddle.net/ru5L5cLg/

解决方案3
 0  2015-09-30 07:28:46

你可以试试这个：

@import url(http://fonts.googleapis.com/css?family=Lato);
@charset "UTF-8";
/* Base Styles */
.cssmenu,
.cssmenu ul,
.cssmenu li,
.cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  position: relative;
}
.cssmenu a {
  line-height: 1.3;
  padding: 6px 15px;
}
.cssmenu {
  width: 200px;
}
.cssmenu > ul > li {
  cursor: pointer;
  background: #000;
  border-bottom: 1px solid #4c4e53;
}
.cssmenu > ul > li:last-child {
  border-bottom: 1px solid #3e3d3c;
}
.cssmenu > ul > li > a {
  font-size: 13px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background: #64676e;
  background: -moz-linear-gradient(#64676e 0%, #4c4e53 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #64676e), color-stop(100%, #4c4e53));
  background: -webkit-linear-gradient(#64676e 0%, #4c4e53 100%);
  background: linear-gradient(#64676e 0%, #4c4e53 100%);
}
.cssmenu > ul > li > a:hover {
  text-decoration: none;
}
.cssmenu > ul > li.active {
  border-bottom: none;
}
.cssmenu > ul > li.active > a {
  background: #97c700;
  background: -moz-linear-gradient(#97c700 0%, #709400 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97c700), color-stop(100%, #709400));
  background: -webkit-linear-gradient(#97c700 0%, #709400 100%);
  background: linear-gradient(#97c700 0%, #709400 100%);
  color: #4e5800;
  text-shadow: 0 1px 1px #709400;
}
.cssmenu > ul > li.has-sub > a:after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  border: 5px solid transparent;
  border-left: 5px solid #ffffff;
}
.cssmenu > ul > li.has-sub.active > a:after {
  right: 14px;
  top: 12px;
  border: 5px solid transparent;
  border-top: 5px solid #4e5800;
}
/* Sub menu */
.cssmenu ul ul {
  padding: 0;
  display: none;
}
.cssmenu ul ul a {
  background: #efefef;
  display: block;
  color: #797979;
  font-size: 13px;
}
.cssmenu ul ul li {
  border-bottom: 1px solid #c9c9c9;
}
.cssmenu ul ul li.odd a {
  background: #e5e5e5;
}
.cssmenu ul ul li:last-child {
  border: none;
}

演示小提琴

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将元素旋转添加到jQuery？ 如何在jQuery中为元素添加ID 如何使用jQuery或Javascript添加元素 如何在jquery追加中添加元素 如何使用 JQuery 在列表中添加元素 如何使用jquery在另一个元素中添加元素 如何使用jQuery在元素中添加元素 如何使用jQuery向HTML添加数组元素 如何使用jQuery和JavaScript将类添加到元素？ 如何使用 Javascript/Jquery 添加子元素
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM