切换不适用于我的jQuery

时间：2016-08-17 02:36:59

标签： javascript jquery css

所以目前我编写了一个程序，当您点击新闻'.article'标题时，'.description'会弹出下方，标题会突出显示为灰色，所有其他标题都会保持关闭状态。然后，当您单击另一个标题时，您单击的第一个标题将关闭，新标题将突出显示并打开。 javascript看起来像这样：

var main = function() {
$('.article').click(function() {
    $('.article').removeClass('current');
    $('.description').hide();

    $(this).addClass('current');
    $(this).children('.description').toggle();
});

};

$(document).ready(main);

以下是'current'的CSS，如下所示：

.current .item {
 background: rgba(206,220,206,.9);
}

现在，我的问题是，当您再次点击它时，我希望当前打开的文章关闭。这就是我编写切换命令$(this).children('.description').toggle();而不仅仅是.show()

的原因

但它没有切换......为什么？它会打开，但除非我点击其他文章标题，否则它不会关闭。我希望我对自己的写作有所了解。这是我第一次尝试学习javascript，我可以使用帮助。

完全披露：这是来自codeacademy关于构建互动网站的课程，但他们的Q / A没有我的问题的答案，显然它不再受到监控，因为他们正在停止这一课。

编辑：根据要求，这是一个HTML示例（它真的很长，所以我不想发布整个内容，但如果你愿意，我会发布。）

<div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

谢谢，

learninghowtocode

2 个答案:

答案 0 :(得分：1)

问题是$('.description').hide();隐藏了所有.description元素，然后您切换当前要显示的元素。您只需要隐藏当前文章中不属于儿童的那些

这是一个更简单的方法（根据斯科特的回答，我喜欢我们所有人都互相推动更好）：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('.article').on('click', function() {
    var $this=$(this).toggleClass('current'); 
    $('.article').not($this).removeClass('current');
  });
});
＆＃13; 
.current .item {
  background: rgba(206, 220, 206, .9);
}
.article:not(.current) .description {
  display: none;
}
＆＃13; 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article">
  <div class="item row">
    <div class="col-xs-3">
      <p class="source">AW Commercial Aviation</p>
    </div>
    <div class="col-xs-6">
      <p class="title">CSeries Supplier Scramble</p>
    </div>
    <div class="col-xs-3">
      <p class="pubdate">Mar 22</p>
    </div>
  </div>
  <div class="description row">
    <div class="col-xs-3">&nbsp;</div>
    <div class="col-xs-6">
      <h1>CSeries Supplier Scramble</h1>
      <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
    </div>
    <div class="col-xs-3">&nbsp;</div>
  </div>
</div>
<div class="article">
  <div class="item row">
    <div class="col-xs-3">
      <p class="source">AW Commercial Aviation</p>
    </div>
    <div class="col-xs-6">
      <p class="title">CSeries Supplier Scramble</p>
    </div>
    <div class="col-xs-3">
      <p class="pubdate">Mar 22</p>
    </div>
  </div>
  <div class="description row">
    <div class="col-xs-3">&nbsp;</div>
    <div class="col-xs-6">
      <h1>CSeries Supplier Scramble</h1>
      <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
    </div>
    <div class="col-xs-3">&nbsp;</div>
  </div>
</div>
<div class="article">
  <div class="item row">
    <div class="col-xs-3">
      <p class="source">AW Commercial Aviation</p>
    </div>
    <div class="col-xs-6">
      <p class="title">CSeries Supplier Scramble</p>
    </div>
    <div class="col-xs-3">
      <p class="pubdate">Mar 22</p>
    </div>
  </div>
  <div class="description row">
    <div class="col-xs-3">&nbsp;</div>
    <div class="col-xs-6">
      <h1>CSeries Supplier Scramble</h1>
      <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
    </div>
    <div class="col-xs-3">&nbsp;</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

原始答案：

问题是$('.description').hide();隐藏了所有.description元素，然后您切换当前要显示的元素。你只需要隐藏那些不是当前文章的孩子的东西：

$('.article').not($(this)).find('.description').hide();

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('.article').click(function() {
    $('.article').removeClass('current');
     $('.article').not($(this)).find('.description').hide();
    $(this).addClass('current');
    $(this).children('.description').toggle();
  });
});
＆＃13; 
.article.current {
  background: rgba(206, 220, 206, .9);
}
.article:not(.current) .description {
  display: none;
}
＆＃13; 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>
  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>
  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

简化。

您只需切换click元素的类，无需添加和删除相同的类。这就是toggleClass()的用途。

使用隐藏/显示项目的变量并默认使用 CSS隐藏该类，效率更高一些。您无需等待DOM加载以隐藏内容。

var main = function() {
$('.article').on('click',function() {
	var desc = $(this).children('.description');
    $(this).toggleClass('current'); //simple class toggle on click element
    $(desc).toggle();
});

};

$(document).ready(main);
.current .item {
 background: rgba(206,220,206,.9);
}

.description { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
</div>

相关问题
最新问题