所以目前我有一個程序編寫，當你點擊一個新聞'.article'標題，'.description'下面彈出下來，標題是灰色突出顯示，所有其他標題保持關閉。然後，當您點擊另一個標題時，您點擊的第一個標題關閉，並且新標題突出顯示並打開。 JavaScript的看起來是這樣的：切換不工作我的jQuery

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

來源

2016-08-17 SGBurek

可以爲您所有相關的代碼添加到OP ...添加HTML以及 – guradio

_「和標題被加亮灰色和所有其他的頭條保持關閉。然後，當你點擊另一個標題「_如果」所有其他標題保持關閉「，如何點擊」另一個標題「元素？你可以在問題中包含'html'嗎？ – guest271314

@ guest271314，所有標題顯示（一個在另一個之上）。當我說標題是_closed_或_open_時，我的意思是文章本身，但所有其他標題仍然可見。 – SGBurek

的問題是，$('.description').hide();隱藏所有.description元素，那麼你切換當前那些顯現。您只需要隱藏不屬於當前文章

這裏有一個簡單的方法對兒童的那些（基於斷斯科特的答案，得愛大家如何互相推更好）：

$(document).ready(function() { 
 
    $('.article').on('click', function() { 
 
    var $this=$(this).toggleClass('current'); 
 
    $('.article').not($this).removeClass('current'); 
 
    }); 
 
});

.current .item { 
 
    background: rgba(206, 220, 206, .9); 
 
} 
 
.article:not(.current) .description { 
 
    display: none; 
 
}

<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>

原來的答案：

的問題是，$('.description').hide();隱藏所有.description元素，然後切換當前顯示的元素。您只需要隱藏不適的東西當前文章像這樣的孩子的那些：

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

$(document).ready(function() { 
 
    $('.article').click(function() { 
 
    $('.article').removeClass('current'); 
 
    $('.article').not($(this)).find('.description').hide(); 
 
    $(this).addClass('current'); 
 
    $(this).children('.description').toggle(); 
 
    }); 
 
});

.article.current { 
 
    background: rgba(206, 220, 206, .9); 
 
} 
 
.article:not(.current) .description { 
 
    display: none; 
 
}

<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>

來源

2016-08-17 03:12:18 DelightedD0D

這工作！非常感謝！我有兩個問題，雖然... 1）爲什麼你必須把.find（'。description'）.find的.find部分。hide（）。那究竟做了什麼？ 2）我沒有改變CSS的方式，你說，它仍然工作。那CSS只是爲了突出不活躍的文章爲黃色？ – SGBurek

@learninghowtocode肯定，問一問 – DelightedD0D

我意外地發佈沒有問題，因爲我按下輸入。所以我編輯了我的帖子，但在這裏他們再次。 @ DelightedD0D 1）爲什麼你必須放置.find（'。description'）.hide（）的.find部分。那究竟做了什麼？ 2）我沒有改變CSS的方式，你說，它仍然工作。那CSS只是爲了突出不活躍的文章爲黃色？ – SGBurek

簡化。

您只需切換click元素的類，不需要添加和刪除相同的類。這就是toggleClass()的用途。

使用項目的變量來隱藏/顯示和使用CSS隱藏該類默認情況下，效率更高一點。您不必等待DOM加載隱藏的東西。

var main = function() { 
 
$('.article').on('click',function() { 
 
\t 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>

來源

2016-08-17 03:20:51 Scott

這也工作！謝謝！ – SGBurek

良好的電話班級操作，雖然你應該看起來更接近之前，不高興;）+ 1 – DelightedD0D

@ DelightedD0D從來沒有說我是「不高興」..只是指出是的，我注意到。 – Scott

切換不工作我的jQuery

回答

原來的答案：

相關問題