1

他の要素内に次のスクリプトがあります。ただし、サブ国のみ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;
    });
});
4

1 に答える 1

0

マークアップに問題があります。ある場所.submenuでは兄弟で.expandあり、別の場所ではそうではありません:

<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;
    });
});
于 2012-07-16T15:58:49.243 に答える