Question

请参阅我之前在StackOverFlow社区帮助下解决的问题，在这里：jQuery How to get element id based on what was clicked AND get child element Id

这让我想到了我目前的问题，涉及与上述帖子类似的代码。

目前，我有一组类别（部分），当点击时，内部信息（内部部分）变得可见。然后，再次单击时，信息将被重新隐藏。

我的问题是：由于我有5个或更多的外部部分，我怎么能拥有它，所以当我点击其中一个部分时，它会抓取其他部分的名称并关闭它们？因为如果我有一个打开并且我去打开另一个，它们将保持打开状态。如果用户打开一个，我宁愿其他人关闭。

此外，我现在拥有代码的方式，当一个打开时，需要两次点击另一个部分才能打开它。请查看JSFiddle。

如果这令人困惑，请参阅此JSFiddle以获取有效工作示例。但我遇到的问题是我的代码和下面提供的代码。我只是想在单击外部部分时打开和关闭部分。但就目前而言，点击时内部部分也会关闭该部分。我不希望这样，因为内部部分将有一些互动元素代码：

$(document).ready(function(){
var isClicked = 0;
var whatsClicked;
$(".workSect").click(function() {
    isClicked++;
    whatsClicked = $(this).find(".innerSect")
    //alert(isClicked);
    clickerCheck();
});
function clickerCheck() {
    if(isClicked == 1){
        whatsClicked.first().css({'visibility' : 'visible', 'display' : 'inline'});
        //alert(isClicked);
    }
    else if(isClicked >= 2){
        whatsClicked.first().css({'visibility' : 'hidden', 'display' : 'none'});
        isClicked = 0;
    }
    else {
        whatsClicked.first().css({'visibility' : 'hidden', 'display' : 'none'});
        isClicked = 0;      
        }
}

}）;

https://jsfiddle.net/5k46e4sr/3/

Answer 1

您不必使用计数器，只需检查可见性

＆＃13;

$(document).ready(function() {
  var $inners = $('.workSect .innerSect');
  $(".workSect").click(function() {
    var $inner = $(this).find('.innerSect'),
      visible = $inner.is(':visible');
    $inner.css({
      'visibility': visible ? 'hidden' : 'visible',
      'display': visible ? 'none' : 'block'
    });
    $inners.not($inner).hide();
  });
});

＆＃13;

#workPort {
  width: 100%;
  display: block;
  float: left;
  text-align: left;
}
.workSect {
  float: left;
  display: block;
}
.workSect h2 {
  display: inline;
  cursor: pointer;
}
.arrowImg {
  display: inline;
  cursor: pointer;
}
.innerSect {
  visibility: hidden;
  display: none;
}
.innerSectVis {
  visibility: visible;
}
#innerSectLogo {}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<article id="workPort">
  <section class="fluid workSect" id="outerSectLogo">
    <h2>Logo - Business Card Design</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectLogo">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectCovers">
    <h2>Publication Covers</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectCovers">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectBook">
    <h2>Book Covers</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectBook">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectAd">
    <h2>Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectAd">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectBanner">
    <h2>Banner Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectBanner">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectMotion">
    <h2>Motion Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectLogo">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectOther">
    <h2>Other Designs</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectOther">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
</article>

＆＃13;

如果您不想设置可见性规则，可以简化

＆＃13;

$(document).ready(function() {
  var $inners = $('.workSect .innerSect');
  $(".workSect").click(function() {
    var $inner = $(this).find('.innerSect').toggle();
    $inners.not($inner).hide();
  });
});

＆＃13;

#workPort {
  width: 100%;
  display: block;
  float: left;
  text-align: left;
}
.workSect {
  float: left;
  display: block;
}
.workSect h2 {
  display: inline;
  cursor: pointer;
}
.arrowImg {
  display: inline;
  cursor: pointer;
}
.innerSect {
  display: none;
}
.innerSectVis {
  visibility: visible;
}
#innerSectLogo {}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<article id="workPort">
  <section class="fluid workSect" id="outerSectLogo">
    <h2>Logo - Business Card Design</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectLogo">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectCovers">
    <h2>Publication Covers</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectCovers">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectBook">
    <h2>Book Covers</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectBook">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectAd">
    <h2>Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectAd">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectBanner">
    <h2>Banner Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectBanner">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectMotion">
    <h2>Motion Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectLogo">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectOther">
    <h2>Other Designs</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectOther">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
</article>

＆＃13;

jQuery - 点击类 - 获取其他类

1 个答案: