jQuery淡入淡出onclick一个li

我正在设置一个服务部分。每个部分ID都有它自己的一组李。我想让李的隐藏，显示：无;并淡入点击/淡出onclick。用我目前的标记和样式编写这个函数的js有困难。jQuery淡入淡出onclick一个li

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; }

任何帮助，将不胜感激。在此先感谢！

来源

2012-05-12 Adam

你是什么意思* “我想有李的隐藏，显示：无;和淡入的onclick /淡出的onclick” *？ – VisioN

应该点击什么来显示“li”元素？ –

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

Demo.

来源

2012-05-12 20:51:51 karim79

您的解决方案缺少'e.preventDefault（）'和淡入淡出。 – VisioN

'preventDefault（）'可能不需要。褪色，我确实想念。 – karim79

$('ul.services li').click(function(){ 
    $(this).fadeOut(function(){$(this).fadeIn();}); 
})

来源

2012-05-12 20:51:55 mgraph

jQuery淡入淡出onclick一个li

回答

相关问题