Question

我在其他元素中有以下脚本。但是，子国家/地区仅expands，如果再次点击则不会collapse。相反，无论您点击多少次，它们都会再次扩展。

有人可以帮忙吗？

<div id="loginContainer">
<a href="#" id="loginButton"><span style="background: #EBEBEB url('/Images/Flags/united_kingdom.jpg') right no-repeat;">United Kingdom</span><em></em></a>
<div style="clear:both"></div>
 <div id="loginBox">
  <!-- Countries Accordion starts here -->
  <ul class="the_menu">
      <li><a href="#" style="background: url('/Images/Flags/USA.gif') left no-repeat;" >United States</a></li>      
      <li>
      <a href="#" class="expand" title="Switzerland" style="background: url('/Images/Flags/USA.gif') left no-repeat;" >Switzerland ..</a>
          <ul class="submenu">
              <li><a href="#" title="Switzerland (German)" style="background: url('/Images/Flags/USA.gif') left no-repeat;;">Switzerland (German)</a></li>
              <li><a href="#" title="Switzerland (French)" style="background: url('/Images/Flags/USA.gif') left no-repeat;;">Switzerland (French)</a></li>
              <li><a href="#" title="Switzerland (Italian)" style="background: url('/Images/Flags/USA.gif') left no-repeat;;">Switzerland (Italian)</a></li>
          </ul>
      </li>
      <li><a href="#" title="Germany" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;">Germany</a></li>
      <li><a href="#" class="expand" title="Canada" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;">Canada ..</a>
          <ul class="submenu">
              <li><a href="#" title="Canada (English)" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;">Canada (English)</a></li>
              <li><a href="#" title="Canada (French)" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;">Canada (French)</a></li>
          </ul>
      </li>
      <li><a href="#" title="Turkey" style="background: url('/Images/Flags/Germany.gif') left no-repeat;">Turkey</a></li>
      <li><a href="#" title="Sweden" style="background: url('/Images/Flags/Germany.gif') left no-repeat;"> Sweden</a></li>
  </ul>
  </div> 
</div>

JQuery脚本是（请在新脚本下方注明）：

$(document).ready(function () {


 var countriesContainer = $('#loginContainer');
var button = $('#loginButton');
var box = $('#loginBox');
//var form = $('#loginForm');
//button.removeAttr('href');

countriesContainer.hover(function() {
    box.toggle();
    button.toggleClass('active');
});
box.mouseup(function() { 
    return false;
});

$(this).mouseup(function(login) {
    if(!($(login.target).parent('#loginButton').length > 0)) {
        button.removeClass('active');
        box.hide();
        $('ul.submenu').hide();
    }
});

 $('ul.submenu').hide();
    $('.expand').click( function(){
        $(this).siblings('.submenu').slideToggle('normal');
        return false;
    });
});

Answer 1

您的标记存在问题，.submenu是.expand的兄弟，而另一个地方则不是：{/ p>

<a href="#" class="expand" title="Switzerland" style="background: url('/Images/Flags/USA.gif') left no-repeat;" >Switzerland ..</a>
          <ul class="submenu">

<li><a href="#" class="expand" title="Canada" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;">Canada ..</a>
          <ul class="submenu">

$(document).ready(function () {
 $('ul.submenu').hide();
    $('.expand').click( function(){
        $(this).parent().next('.submenu').slideToggle('normal');
        return false;
    });
});

slideToggle不起作用

1 个答案: