2016-05-23 17 views
0

in einer meiner drupal Seite Ich habe 3 Drop-Menü. Wenn ich auf jedes Thema klicke, muss es ein DropDown-Menü öffnen, funktioniert aber nicht. Sie können js und css dieser Seite sehen.jQuery Klicken Sie auf Problem für SlideUp und SlideDown

das ist meine Webseite: 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; 
 
}

Antwort

1

Das Problem war, weil die HTML-Struktur. Sie haben manchmal zwei Links für Open der Dropdown statt nur einer und es zu Schwierigkeiten mit dem next() Selektor

Das zweite Problem der Inline-Stil auf ul Element in Ihrem HTML-Code war, vor allem height: 1px; Teil.

See this working fiddle here