Javascript隐藏/显示div

Question

我有一个带有 4 个不同 div 的 javascript 隐藏/显示 div。它正在部分工作，但没有按照我想要的方式运行。当我单击其中一个 div 时，它会打开隐藏的 div，这是完美的，但是当我单击另一个链接以打开另一个 div 时，我希望我先单击的另一个 div 关闭，然后打开新的 div。这是我的javascript。

$('[id^="hideshow"]').on('click', function(event) {
    var dataValue = $(this).attr('data-value');
    dataValue = $('#'+dataValue);
    $(dataValue).toggle('hide');
});

<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1"><div class="witb">
    <hr class="dark2">
  <p></p>Whats in the Bag &nbsp;<i class="fa fa-angle-down" style="font-size:24px"></i></p>
  </div>
</div></a>

    <div id='content2' style="display:none">
<div class="wedge-thumbs">
  <img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
  <a href="#" class="customize"><span style="customize"> Customize It</span></a>
  <hr class="dark">
  <span class="title">Milled Grind 54&deg; LB</span>

</div>
<div class="wedge-thumbs">
  <img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
  <a href="#" class="customize"><span style="customize"> Customize It</span></a>
  <hr class="dark">
  <span class="title">Milled Grind 54&deg; LB</span>

</div>

<div class="wedge-thumbs">
  <img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
  <a href="#" class="customize"><span style="customize"> Customize It</span></a>
  <hr class="dark">
  <span class="title">Milled Grind 54&deg; LB</span>

</div>

</div>

Answer 1

// Hopefully you have some selector reference to target them all
var $all = $(".drops");  // Clearly I used .drops for example

$('[data-value]').on('click', function(event) {

    var $target = $('#'+ this.dataset.value);

    $all.not( $target ).hide(); // Hide all but target one
    $target.toggle();           // Toggle target one
});

这是一个改进的例子：

var $all = $(".togglable");

$('[data-toggle]').on('click', function(event) {

  var $target = $(this.dataset.toggle);

  $all.not( $target ).hide(); // Hide all but target one
  $target.toggle();           // Toggle target one
});

[data-toggle]{cursor:pointer; display:inline-block; color:#0bf; padding:0 8px;}
.hidden{display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a data-toggle="#el1">TOGGLE1</a>
<a data-toggle="#el2">TOGGLE2</a>
<a data-toggle="#el3">TOGGLE3</a>

<div id="el1" class="togglable hidden">ELEMENT1</div>
<div id="el2" class="togglable hidden">ELEMENT2</div>
<div id="el3" class="togglable hidden">ELEMENT3</div>

Answer 2

请试试这个

$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggleClass('hide');
});

Answer 3

如果你可以给你的 div 一个通用类而不是 id 会更好，这样你就可以使用这个通用类隐藏其他 div，例如：

$('.common_class').addClass('hide');

如果你不能，你可以遍历所有的 div 并在显示当前点击的之前隐藏它们：

$('[id^="hideshow"]').on('click', function(event) {
    $('[id^="hideshow"]').each(function(){
        $('#'+$(this).data('value')).addClass('hide');
    });

    dataValue_id = $('#'+$(this).data('value'));
    $(dataValue_id).toggleClass('hide');
});

希望这会有所帮助。

使用通用类的片段：

$('.common_class').on('click', function(event) {
    $('.common_class_2').not($('.common_class_2', this)).addClass('hide');
    $('.common_class_2', this).toggleClass('hide');
});

.hide{
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='common_class'>DIV 1
  <p class='common_class_2'>Content 1</p>
</div>
<div class='common_class'>DIV 2
  <p class='common_class_2 hide'>Content 2</p>
</div>
<div class='common_class'>DIV 3
  <p class='common_class_2 hide'>Content 3</p>
</div>
<div class='common_class'>DIV 4
  <p class='common_class_2 hide'>Content 4</p>
</div>