1

我正在设置一个服务部分。每个部分 id 都有自己的一组 li。我想把 li 隐藏起来，display:none; 并淡入 onclick/淡出 onclick。使用我当前的标记和样式编写此函数的 js 时遇到问题。

html -

<div id="small-container" class="services">
                    <nav id="services-sections">
                        <a class="active" href="#/one" id="nav-one">One</a>
                        <a href="#/two" id="nav-two">Two</a>
                        <a href="#/three" id="nav-three">Three</a>
                        <a href="#/four" id="nav-four">Four</a>
                        <a href="#/five" id="nav-five">Five</a>
                    </nav>
                    <article id="section-one" class="services-content">
                        <ul class="services">
                            <li class="service-item">One - one </li>
                            <li class="service-item">One - two </li>
                            <li class="service-item">One - three </li>
                        </ul>
                    </article>
                    <article id="section-two" class="services-content">
                        <ul class="services">
                            <li class="service-item">Two - one </li>
                            <li class="service-item">Two - two </li>
                            <li class="service-item">Two - three </li>
                        </ul>
                    </article>
                    <article id="section-three" class="services-content">
                        <ul class="services">
                            <li class="service-item">Three - one </li>
                            <li class="service-item">Three - two </li>
                            <li class="service-item">Three - three </li>
                        </ul>
                    </article>
                    <article id="section-four" class="services-content">
                        <ul class="services">
                            <li class="service-item">Four - one </li>
                            <li class="service-item">Four - two </li>
                            <li class="service-item">Four - three </li>
                        </ul>
                    </article>
                    <article id="section-five" class="services-content">
                        <ul class="services">
                            <li class="service-item">Five - one </li>
                            <li class="service-item">Five - two </li>
                            <li class="service-item">Five - three</li>
                        </ul>
                    </article>
                </div>

CSS -

#small-container { float: left; width: 240px; color: #000; font-family: Arial, Helvetica, sans-serif; }
        #small-container.services { width: 350px; }
        #services-sections a { text-decoration: none;  text-transform: none; font-weight: bold; font-size: 1em; margin-right: 12px; margin-bottom: 10px; display: inline-block; color: #222; }
        #services-sections a:hover, #services-sections a.active { color: #AAA; }
        .services-content { display: ; position: relative;  }
        .services-content.active { display: inline-block; }
        .services { list-style-position: inside; list-style: none; }
        .services { *list-style: none; }
        .services.active {}
        .service-item { text-indent: -15px; padding-left: 6px; margin-bottom: 12px; font-size: 12px; cursor: default; }
        .ie8 .service-item { text-indent: -22px; }
        .ie7 .service-item { text-indent: -18px; padding-left: 20px; }

任何帮助，将不胜感激。提前致谢！

4

2 回答 2

3 
$("#services-sections > a").click(function () {
    $("#section-" + this.id.split("-")[1]).fadeToggle();
});

演示。

于 2012-05-12T20:51:51.410 回答
1 
$('ul.services li').click(function(){
   $(this).fadeOut(function(){$(this).fadeIn();});
})
于 2012-05-12T20:51:55.473 回答