javascript - CSS 和 JQuery : Better Usability

Question

我想改进以下代码的用户体验:

HTML:

<div class="news-item">
    <div class="main-content">
        <div class="header"> Header 1 </div>
        <div class="content"> lorum ipsum </div>
        <div class="time"> time </div>
    </div>
</div>

<div class="news-item">
    <div class="main-content">
        <div class="header"> Header </div>
        <div class="content"> lorum ipsum </div>
        <div class="time"> time </div>
    </div>
</div>​

JavaScript:

jQuery(document).ready(function() {
    $(".header").click(function () {
      $(this).parent().toggleClass("expand");
    });
});​

CSS:

body {
    background-color: whitesmoke;
}

.header{
    font-size: 20px;
    padding-bottom: 20px;
    cursor:pointer;
}

.main-content {
    margin: 0 0 12px 70px;
    padding: 0;
    background: rgb(251, 251, 251);
    width: 80%;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    position:relative;
    margin-left: 20px;
    margin-top: 20px;
    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 22px;
    height: 20px;
    overflow: hidden;
}

.expand {
    height: 200px;
}​

演示:http://jsfiddle.net/9UJ7f/4/

您可能会注意到，当您单击标题时，该框会展开或折叠。

但是，这仅在我们单击页眉时有效，例如当我们单击框的边框时(在折叠模式下)没有任何反应。

为了消除“无效点击”，我希望它是这样的:

一个。在折叠模式下: 如果您单击框(.main-content 类)上的任意位置，该元素将展开

B.在扩展模式下: 如果您只单击 .Header 类，该元素将再次收缩。

执行此操作的最佳方法是什么？

更新:

好吧，你是对的。 CSS 有点不对劲。 我选择 sandeep 的解决方案，因为它是最简约但最有效的解决方案。 但也要感谢所有提供帮助的人。特别是 thecodeparadox 和 Arif 的 JS 解决方案。 (尽管它在边界周围仍然有一些“无效点击”)。 你们真棒，伙计们。我会给你们所有人竖起大拇指。

Answer 1

jQuery(document).ready(function() {
    $('.header').click(function(e) {
        e.stopPropagation();
        $(this).parent().toggleClass('expand');
    })
    $(".main-content").click(function() {
        if (!$(this).hasClass('expand')) {
            $(this).addClass("expand");
        }
    });
});

Perfect working sample