jQuery Click的slideUp和SlideDown问题

Question

在我的drupal页面之一中，我有3个下拉菜单。 当我单击每个主题时，它必须打开一个下拉菜单，但无法正常工作。 您可以看到该页面的js和CSS。

这是我的网页： http : //pajoohyar.ir/start_standalone

 (function ($) { $(document).ready(function () { $('#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); 

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300); @charset "UTF-8"; /* Base Styles */ #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; direction: rtl; line-height: 1.5; font-family: tahoma, "Helvetica Neue", "Lucida Grande", sans-serif; font-size: 14px; position: relative; } #cssmenu { width: 750px; background: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); direction: rtl; } #cssmenu > ul > li { margin: 0 0 2px 0; } #cssmenu > ul > li:last-child { margin: 0; } #cssmenu > ul > li > a { font-size: 15px; display: block; color: #ffffff; text-shadow: 0 1px 1px #000; background: #565656; background: -moz-linear-gradient(#565656 0%, #323232 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232)); background: -webkit-linear-gradient(#565656 0%, #323232 100%); background: linear-gradient(#565656 0%, #323232 100%); border: 1px solid #000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #cssmenu > ul > li > a > span { display: block; border: 1px solid #666666; padding: 6px 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-weight: bold; } #cssmenu > ul > li > a:hover { text-decoration: none; } #cssmenu > ul > li.active { border-bottom: none; } #cssmenu > ul > li.active > a { background: #97be10; background: -moz-linear-gradient(#97be10 0%, #79980d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97be10), color-stop(100%, #79980d)); background: -webkit-linear-gradient(#97be10 0%, #79980d 100%); background: linear-gradient(#97be10 0%, #79980d 100%); color: #fff; text-shadow: 0 1px 1px #000; border: 1px solid #79980d; } #cssmenu > ul > li.active > a span { border: 1px solid #97be10; } #cssmenu > ul > li.has-sub > a span { background: url(images/icon_plus.png) 2% center no-repeat; } #cssmenu > ul > li.has-sub.active > a span { background: url(images/icon_minus.png) 2% center no-repeat; } /* Sub menu */ #cssmenu ul ul { padding: 5px 12px; display: none; } #cssmenu ul ul li { padding: 3px 0; } #cssmenu ul ul a { display: block; color: #595959; font-size: 13px; font-weight: bold; } #cssmenu ul ul a:hover { color: #79980d; } #borderimg1 { border: 10px solid red; padding: 15px; -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */ //border-image: url(border.png) 30 round; } .divstyyle { direction: rtl; text-align: justify; } 

Answer 1

问题是由于您的HTML结构。 有时您有两个链接来打开下拉列表，而不仅仅是一个链接，这会导致next()选择器出现问题

第二个问题是HTML代码中ul元素的内联样式，尤其是height: 1px; 部分。

在这里看到这个工作的小提琴