Question

我创建了三个onclick触发器函数，它们在更大的div“main”中触发三个独立的div。由于某种原因，该功能仅在一次点击后才有效，然后我必须刷新页面。

例如，如果我单击以触发运动功能，我必须先刷新页面才能使用新闻按钮。从那里我必须刷新页面。在触发第二或第三个事件之前，如何让主div重新加载？我试过location.reload()，但这似乎不起作用。

<div id="main">

 <div id="news">
<h2 id="newsbtn"> News </h2>
</div>  

<div id="interactive">
<h2 id="interactivebtn"> Interactive</h2>
</div>

<div id="sports">
<h2 id="sportsbtn"> Sports </h2>
</div>

</div>

$( "#newsbtn" ).click(function() {
$("#sports").fadeOut( "slow", "linear" ),
  $("#interactive").fadeOut( "slow", "linear" );})


$( "sportsbtn" ).click(function() {
$("#interactive").fadeOut( "slow", "linear" ),
  $("#news").fadeOut( "slow", "linear" );})


$( "#interactivebtn" ).click(function() {
  $("#sports").fadeOut( "slow", "linear" ),
$("#news").fadeOut( "slow", "linear" );})


$( "#news" ).click(function() {
$("#sports").fadeOut( "slow", "linear" ),
  $("#interactive").fadeOut( "slow", "linear" );})
;})

Answer 1

听起来你基本上都想成为一名手风琴家。

在这种情况下，当您点击一个元素时，您当前正在隐藏所有其他元素。之后，您无法单击其他元素之一，因为您已隐藏它们。

通常，对于手风琴，每个元素都有一个带有标题和内容区域的容器，只有内容区域会被隐藏而不需要点击标题

这是一个简单的（并非完美的）示例，如果这确实是您想要的：

＆＃13;

$("#main").on('click', '.selectable-container .header', function() { 
  var $container=$(this).closest('.selectable-container');
  $('.selectable-container').not($container).find('.content').fadeOut("slow", "linear");
  $container.find('.content').fadeIn("slow", "linear");
})

＆＃13;

.selectable-container .content{
  display:none;
}
.selectable-container .header{
 cursor:pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="news selectable-container"> 
    <div class="header">news</div>
    <div class="content">news content</div>
  </div>
  <div class="interactive selectable-container">
    <div class="header">header</div>
    <div class="content">header content</div>
    </div>
  <div class="sports selectable-container">
    <div class="header">sports</div>
    <div class="content">sports content</div>
    </div>
</div>

＆＃13;

触发较小的div后重新加载较大的div

1 个答案: