Я пытаюсь закрыть один div при нажатии на другой div. В настоящее время он открывает несколько div одновременно.

ДЖКЕРИ:

$(document).ready(function() {

    $(".dropdown dt a").click(function() {
        var dropID = $(this).closest("dl").attr("id");
        $("#"+dropID+" dd ul").slideToggle(200);
        return false; 
    });

    $(".dropdown dd ul li a").click(function() {
        var dropID = $(this).closest("dl").attr("id");
        var text = $(this).html();
        var selVal = $(this).find(".dropdown_value").html();
        $("#"+dropID+" dt a").html(text);
        $("#"+dropID+" dd ul").hide();
        return false; 
    });

    $("dl[class!=dropdown]").click(function() {
        $(".dropdown dd ul").hide();
        return false; 
    });


    $("id!=quotetoolContainer").click(function() {
        $(".dropdown dd ul").hide();
        return false; 
    }); 

    $('body').click(function() {
        $(".dropdown dd ul").hide();
        return false; 
    }); 

    $('.productSelection').children().hover(function() {
        $(this).siblings().stop().fadeTo(200,0.5);
    }, function() {
        $(this).siblings().stop().fadeTo(200,1);
    });

});

HTML:

<div id="quotetoolContainer">
  <div class="top"></div>
  <div id="quotetool">
    <h2>Instant Price Calculator</h2>
    <p>Document Type</p>
    <dl id="docType" class="dropdown">
      <dt><a href="#"><span>Select a Document Type</span></a></dt>
      <dd>
        <ul>
          <li><a href="#" id="1">Datasheets<span class="value">Datasheets</span></a></li>
          <li><a href="#">Manuals<span class="value">Manuals</span></a></li>
          <li><a href="#">Brochures<span class="value">Brochures</span></a></li>
          <li><a href="#">Newsletters<span class="value">Newsletters</span></a></li>
          <li><a href="#">Booklets<span class="value">Booklets</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Flat Size</p>
    <dl id="flatSize" class="dropdown">
      <dt><a href="#">8.5" x 11"<span class="value">8.5" x 11"</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">8.5" x 11"<span class="value">8.5" x 11"</span></a></li>
          <li><a href="#">11" x 17"<span class="value">11" x 17"</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Full Color or Black &amp; White?</p>
    <dl id="color" class="dropdown">
      <dt><a href="#">Full Color<span class="value">Full Color</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">Full Color<span class="value">Full Color</span></a></li>
          <li><a href="#">Black &amp; White<span class="value">Black &amp; White</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Paper</p>
    <dl id="paper" class="dropdown">
      <dt><a href="#">Value White Paper (20 lb.)<span class="value">Value White Paper (20 lb.)</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">Value White Paper (20 lb.)<span class="value">Value White Paper (20 lb.)</span></a></li>
          <li><a href="#">Premium White Paper (28 lb.)<span class="value">Premium White Paper (28 lb.)</span></a></li>
          <li><a href="#">Glossy White Text (80 lb.) - Recycled<span class="value">Glossy White Text (80 lb.) - Recycled</span></a></li>
          <li><a href="#">Glossy White Cover (80 lb.) - Recycled<span class="value">Glossy White Cover (80 lb.) - Recycled</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Folding</p>
    <dl id="folding" class="dropdown">
      <dt><a href="#">Fold in Half<span class="value">Fold in Half</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">Fold in Half<span class="value">Fold in Half</span></a></li>
          <li><a href="#">Tri-Fold<span class="value">Tri-Fold</span></a></li>
          <li><a href="#">Z-Fold<span class="value">Z-Fold</span></a></li>
          <li><a href="#">Double-Parallel Fold<span class="value">Double-Parallel Fold</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Three-Hole Drill</p>
    <dl id="drill" class="dropdown">
      <dt><a href="#">No<span class="value">No</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">No<span class="value">No</span></a></li>
          <li><a href="#">Yes<span class="value">Yes</span></a></li>
        </ul>
      </dd>
    </dl>
    <p>Qty</p>
    <dl id="quantity" class="dropdown">
      <dt><a href="#">50<span class="value">50</span></a></dt>
      <dd>
        <ul>
          <li><a href="#">50<span class="value">50</span></a></li>
          <li><a href="#">100<span class="value">100</span></a></li>
          <li><a href="#">150<span class="value">150</span></a></li>
          <li><a href="#">200<span class="value">200</span></a></li>
          <li><a href="#">250<span class="value">250</span></a></li>
          <li><a href="#">500<span class="value">500</span></a></li>
          <li><a href="#">750<span class="value">750</span></a></li>
          <li><a href="#">1,000<span class="value">1,000</span></a></li>
          <li><a href="#">1,500<span class="value">1,500</span></a></li>
          <li><a href="#">2,000<span class="value">2,000</span></a></li>
          <li><a href="#">2,500<span class="value">2,500</span></a></li>
          <li><a href="#">3,000<span class="value">3,000</span></a></li>
          <li><a href="#">3,500<span class="value">3,500</span></a></li>
          <li><a href="#">4,000<span class="value">4,000</span></a></li>
          <li><a href="#">4,500<span class="value">4,500</span></a></li>
          <li><a href="#">5,000<span class="value">5,000</span></a></li>
          <li><a href="#">5,500<span class="value">5,500</span></a></li>
          <li><a href="#">6,000<span class="value">6,000</span></a></li>
          <li><a href="#">6,500<span class="value">6,500</span></a></li>
          <li><a href="#">7,000<span class="value">7,000</span></a></li>
          <li><a href="#">7,500<span class="value">7,500</span></a></li>
          <li><a href="#">8,000<span class="value">8,000</span></a></li>
          <li><a href="#">8,500<span class="value">8,500</span></a></li>
          <li><a href="#">9,000<span class="value">9,000</span></a></li>
          <li><a href="#">9,500<span class="value">9,500</span></a></li>
          <li><a href="#">10,000<span class="value">10,000</span></a></li>
          <li><a href="#">12,500<span class="value">12,500</span></a></li>
          <li><a href="#">15,000<span class="value">15,000</span></a></li>
          <li><a href="#">17,500<span class="value">17,500</span></a></li>
          <li><a href="#">20,000<span class="value">20,000</span></a></li>
        </ul>
      </dd>
    </dl>
    <div id="priceTotal">
      <div class="priceText">Your Price:</div>
      <div class="price">$29.00</div>
      <div class="clear"></div>
    </div>
    <div id="buttonQuoteStart"><a href="#" title="Start Printing">Start Printing</a></div>
  </div>
  <div class="bottom"></div>
</div>
1
Stephen S. 28 Янв 2010 в 22:48
1
Опубликовать HTML тоже, вероятно, более простой способ сделать это
 – 
davidosomething
28 Янв 2010 в 22:52

2 ответа

Лучший ответ

Нашел свое решение!

$(".dropdown dt a").click(function() {
  var dropID = $(this).closest("dl").attr("id");

  if ($("#"+dropID+" dd ul.opened").length) { 
    $('ul.opened').slideToggle(200).removeClass('opened');
  } else {
    $('ul.opened').slideToggle(200).removeClass('opened');
    $("#"+dropID+" dd ul").slideToggle(200).addClass('opened');
  }
  return false;     
});
2
Nick Craver 17 Апр 2010 в 19:16

Использование slideToggle для коллекции элементов откроет все закрытые и закроет все открытые. Использование класса для отслеживания того, какой из них открыт, и последующее перемещение только определенных ul, которые вы хотите открыть и закрыть, вероятно, будет лучшим решением. Что-то вроде этого:

$(".dropdown dt a").click(function() {
    $('ul.opened').slideToggle(200).removeClass('opened');
    $(this).closest("dl").find("dd ul").slideToggle(200).addClass('opened');
    return false; 
});

Лично мне нравится использовать slideUp и slideDown, а не slideToggle. Таким образом, я точно знаю, что происходит.

0
munch 28 Янв 2010 в 22:55
На самом деле это не открытие всех DIV при нажатии. Он открывает соответствующий DIV, но когда вы щелкаете по новому DIV, он открывается, но не закрывает предыдущий DIV. Это помогает немного это объяснить? Ваши предложения показали мне новое возможное направление, спасибо!
 – 
Stephen S.
28 Янв 2010 в 23:07
Тогда причина, по которой он не переключал открытый, заключалась в том, что вы обращались только к определенной ul в DOM (той, которая ближе всего к привязке, на которую вы нажали). Вам нужен способ переключения как открытого, так и того, на который вы нацеливались, чтобы заставить его работать. Рад, что смог помочь.
 – 
munch
28 Янв 2010 в 23:20
Еще раз спасибо, Мунк, разобрался и просто опубликовал решение.
 – 
Stephen S.
29 Янв 2010 в 00:31