这是我的工作小提琴:http://jsfiddle.net/exlondoner/YvPg9/ 我想要实现的是能够从媒体类型中选择(概述)一个选项,从排序依据中选择一个项目,我该怎么做?
JS:
$('.media-select-option').on('click', function() {
$(this).addClass('selected');
$('.overlay-close-btn').addClass('checked');
});
HTML:
<div class="overlaymedia">
<div class='media-filter'>
<div class="media-nav" role='contentinfo'>
<div class="media-nav media-menu-container">
<h5 class="media-menu-heading close-overlay-btn">Media Type</h5>
<!-- Media Type: All/Photos/Videos -->
<div class="media-select-option media-all" data-href="">All</div>
<div class="media-select-option media-photos" data-href="">Photos</div>
<div class="media-select-option media-videos" data-href="">Videos</div>
<h5 class="media-menu-heading close-overlay-btn">Sort By</h5>
<!-- Sort By: Latest/Popular -->
<div class="media-select-option media-latest" data-href="">Latest</div>
<div class="media-select-option media-popular" data-href="">Popular</div>
<div class="media-menu-bottom close-overlay-btn">
<div class="overlay-close-btn bottom">Close</div>
</div>
</div>
</div>
</div>
的CSS:
.overlay-close-btn:before { content: '×'; }
.overlay-close-btn.checked:before {
content: '✔';
}
.media-select-option {
border: solid 1px #fff;
}
.selected {
border: solid 1px #f00;
}
答案 0 :(得分:0)
将您的选项放在不同的div
中:
<div>
<div class="media-select-option media-all" data-href="">All</div>
<div class="media-select-option media-photos" data-href="">Photos</div>
<div class="media-select-option media-videos" data-href="">Videos</div>
</div>
<h5 class="media-menu-heading close-overlay-btn">Sort By</h5>
<!-- Sort By: Latest/Popular -->
<div>
<div class="media-select-option media-latest" data-href="">Latest</div>
<div class="media-select-option media-popular" data-href="">Popular</div>
</div>
然后,您将能够实现您想要的目标:
$(this).siblings().removeClass('selected');
答案 1 :(得分:0)
这是你想要达到的目标吗? - http://jsfiddle.net/skip405/YvPg9/2/
我还建议使用更多语义标记。如果需要选择一个选项而不选择其他选项 - 只需将input[type="radio"]
与propper label
一起使用。
在我看来 - 你的标记应该是这样的 - http://jsfiddle.net/skip405/YvPg9/5/