2

我想改善以下代码的用户体验：

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/

您可能会注意到，当您单击页眉时，框会展开或折叠。

但是，这仅在我们单击标题时有效，例如，当我们单击框的边框（在折叠模式下）时，没有任何反应。

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

A. 在折叠模式下：如果单击框上的任意位置（.main-content 类），该项目将展开

B. 在扩展模式下：如果您只单击 .Header 类，项目将再次收缩。

这样做的最佳方法是什么？

更新：

好吧，你是对的。CSS 有点偏离。我选择了 Sandeep 的解决方案，因为它是最简约但效果最好的解决方案。但也要感谢所有提供帮助的人。特别是 codeparadox & Arif 的 JS 解决方案。（尽管边界周围仍然有一些“无效点击”）。你们太棒了，伙计们。我会给大家竖起大拇指的。

4

6 回答 6

2 
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");
        }
    });
});

完美的工作样本

于 2012-06-01T10:00:31.570 回答
1

演示

<div class="main-content">
    <h2 class="header"> Header 1 </h2>     <!-- you can use h2 -->
    <div class="content"> lorum ipsum 1 </div>
    <div class="time"> time 1</div>
</div>

只需从容器 ( ) 中移除填充.content并使用您的子元素填充。

.main-content {  
    
    position:relative;
    overflow: hidden;
    margin-left: 20px;
    margin-top: 20px;
    
    width: 80%;
    height: 50px;  
    
    background: rgb(251, 251, 251);
   
    -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);

    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}

h2.header, .content, .time{
    padding:3px 22px;
}
h2.header{   
    padding:13px 22px;
    font-size: 20px;    
    cursor:pointer;
}
.time{ padding-bottom:20px; }
于 2012-06-01T09:59:55.377 回答
1

为标题DIV提供填充。像这样写：

    .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-bottom: 22px;
        height: 42px;
        overflow: hidden;
    }
    .header  ~ div{
        margin:22px;
    }

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

检查这个http://jsfiddle.net/9UJ7f/14/

于 2012-06-01T10:00:36.627 回答
1

这应该适合你：

演示

这是新的javascript：

jQuery(document).ready(function() {
    $(".news-item").click(function () {
        if( !$('.main-content', this).hasClass('expand') )
            $('.main-content', this).toggleClass("expand");
    });

    $('.news-item .main-content.expand .header').live('click',function () {
        $(this).parent().toggleClass("expand");
    });
});​

这就是你所描述的。如果 .news-item 没有 .expand 类，它只会扩展一个项目。如果确实有，那么单击标题是唯一可以关闭它的方法。

于 2012-06-01T10:01:02.210 回答
1

你的js是正确的。改变你的CSS

body {
    background-color: whitesmoke;
}

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

.content { padding: 0 22px; }
.time { padding: 0 22px; }

/* thanks to raingroove for the main styling ! */
.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;
    height: 66px;
    overflow: hidden;
}

.expand {
    height: 200px;
}

见http://jsfiddle.net/9UJ7f/25/

于 2012-06-01T10:07:39.487 回答
1

@thecodeparadox 答案的小补充 

jQuery(document).ready(function() 
   {
    $('.header').click(function(e) {
        e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; //e.stopPropagation() does not work for all browsers
        $(this).parent().toggleClass('expand');
    })
    $(".main-content").click(function() {
        if (!$(this).hasClass('expand')) {
            $(this).addClass("expand");
        }
    });
});
于 2012-06-01T10:11:58.080 回答