jQuery显示隐藏内容

Question

This is my pen: http://codepen.io/anon/pen/IszKj

What I want to do is how it so when I click on either any status or any date I open up a hidden div which gives a list of options.

My question is, how do I approach this in the best way?

1. Do I have two different divs and then open the one which is relevant to the list item which was clicked:

<div id="status" style="display: hidden">Option 1 Option 2</div>
<div id="date" style="display: hidden">Option 1 Option 2</div>

2. Do I have one div and only show the content inside it which is relevant to that button?

<div style="hidden">
<span id="status">...</span> 
<span id="date">...</span> 
</div>

In addition to this, should I be using toggle or the traditional open / close function.

It would be nice for it to be degradable if JS is disabled.

Answer 1

Created a Fiddle for you:

http://jsfiddle.net/e4mQD/1/

HTML:

<div style="display: block;
height: 40px;">
    <ul id="filter">
        <li>
            <span>Any status▾</span>
            <ul class="options">
                <li>Option1</li>
                <li>Option2</li>
            </ul>
        </li>
        <li>
            <span>Any date▾</span>
            <ul class="options">
                <li>OptionA</li>
                <li>OptionB</li>
            </ul>    
        </li>
    </ul> 

CSS:

#filter, .options {
  list-style-type: none;
}

.options {
  display:none;
}

.options li {
    cursor: pointer;
}

JavaScript:

$('#filter li').click(function(){
  $(this).find('.options').toggle();
});

Answer 2

display:hidden is not valid css rule. You need to use display:none

Answer 3

If you want to keep accessibility in mind change the hidden status when loading the site with javascript, if you do that user that have add-ons like NoScript active get to see every option without loosing functionality. People who use NoScript tend to dislike sites that force them to deactivate NS to use it properly.

For your solution I suggest to use two separate divs, with this you have the option to show both boxes at the same time and have a styled version that makes clear, that these are separate. Add a class like "optionbox" to these and throw your css rules in there instead of making a rule with #date, #status

Answer 4

My question is, how do I approach this in the best way?

In your particular use-case, it is better that you use different blocks for each of those options.

In fact, as @mh-itc pointed out, it is better if you use nested list ie ul instead of div inside those li s.

Also, you may use a instead of span .

It would be nice for it to be degradable if JS is disabled.

This can be achieved by deferring the display:none; until the JavaScript is loaded and run.

Demo: http://jsfiddle.net/abhitalks/928Dj/

Markup :

<div>
    <ul id="filter">
        <li>
            <a href="#" class="dropdown">Any status ▾</a>
            <ul class="opt">
                <li><label><input type="checkbox" />Status 1</label></li>
                <li><label><input type="checkbox" />Status 2</label></li>
            </ul>
        </li>
        <li>
            <a href="#" class="dropdown">Any date ▾</a>
            <ul class="opt">
                <li><label><input type="checkbox" />Date 1</label></li>
                <li><label><input type="checkbox" />Date 2</label></li>
            </ul>
        </li>
    </ul>
</div>

CSS :

ul {
    margin: 0; padding: 0;
    list-style: none;
}
#filter {
    display: inline-block;
}
#filter > li {
    display: inline-block;
    margin-bottom: 12px;
    padding-right: 12px;
    vertical-align: top;
}
ul.opt.hidden {
    display: none;
}

jQuery Code :

// comment out to see how it degrades without javascript
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
      $(this).next('ul').toggle();
});

Note : In the demo, un-comment the JavaScript code to see how it will behave when JavaScript is available. And comment out to see how it degrades when JavaScript isn't available.