jQuery查找类名不适用于第二次单击函数

我有下面的代码，当用户单击月份时，只显示特定月份的内容，当用户单击年份时，显示该年份的所有月份内容，但我很难让它正常工作

HTML

<div>
  <ul>
    <li class="year15">2015
      <ul>
        <li class="jan15">JAN</li>
        <li class="feb15">FEB</li>
      </ul>
    </li>
    <li class="year14">2014
      <ul>
        <li class="jan14">JAN</li>
        <li class="feb14">FEB</li>
      </ul>
    </li>
  </ul>
</div>

<div class="months">

  <div class="year15">
    <div class="jan15">
      <p>january 2015</p>
    </div>
    <div class="feb15">
      <p>february 2015</p>
    </div>
  </div>

  <div class="year14">
    <div class="jan14">
      <p>january 2014</p>
    </div>
    <div class="feb14">
      <p>february 2014</p>
    </div>
  </div>

</div>

jQuery-这会显示各个月份的内容

$('ul li ul li').click(function() {
  var className = $(this).attr('class');

  $('.months > div').children().hide();

  if ($('.' + className).length > 0) {
    $('.' + className).show();
  }
});

如果我把这两个代码放在一起，先点击年份，然后点击月份就可以了，但是当我点击年份，或者点击年份之前的月份时，年份代码表就会失效

我使用下面的代码成功地实现了它，但是如果我加上这些年的代码，代码将会非常长

if ($(this).hasClass('year14')) {
    $('.months .year14').children().show();
  } else if ($(this).hasClass('year15')) {
    $('.months .year15').children().show();

有没有办法解决这个问题，或者我的最终jQuery代码是唯一的出路

这应该可以：

$('li[class*="year"]').click(function(e) {
    var className = $(this).attr('class').split(' ').pop();
    $('div[class*="year"] div').show();
    $('div[class*="year"]').hide();
    $('div.'+className).show();
  console.log(className);
});
$('li[class*="year"] > ul > li').click(function(e) {
    e.stopPropagation();
    var className = $(this).attr('class').split(' ').pop();
    $('div[class*="year"] div').hide();
    $('div[class*="year"]').hide();
    $('div.'+className).parent().show();
    $('div.'+className).show();
  console.log(className);
});

---

看小提琴：

我喜欢这首曲子，我认为它可读

Javascript:

$('li').on('click',function(event){

  if (event.target !== this)
    return;

   var data = $(this).data();
   var $months = $('.months');
   var $year = $months.find('[data-year="'+data.year+'"]');

   $months.find('.year, .month').hide();

   switch(data.type){
    case 'year':
        $year.show().find('.month').show();
        break;
    case 'month':
        $year.show().find('[data-month="'+data.month+'"]').show();
        break;
   }


});

HTML:

2015

1月
2月


2014

1月
2月



2015年1月

2015年2月

2014年1月

2014年2月

---

旁注：永远不需要使用jQuery使用

if（$（'..+className）.length>0）{$（'.+className）.show（）；}

。jQuery是基于集合的。只需

$（'..+className）.show（）是您所需要的全部。如果没有匹配的元素，它就不会做任何事情（这不是一个错误）。@t.J.Crowder Thank you，将相应地更新Thank you工作得很好，但如果我向li添加多个类，代码将不再工作。@tatty编辑了我的代码（和fiddle）以用于多个类。请注意，渴望和蒙恩课程必须被定位为最后一个课程（意思是
class=“foo bar year15”
）再次感谢，这是一个魅力所在。再问一个简单的问题。对于li，我有一个
addClass
，它在单击li时运行，并在Dream之后添加类，这使得代码无法工作，因此如果我将Dream放在开头并删除
.pop（）
，这是否有效？将.pop（）替换为[0]，这样它将返回由.split（“”）创建的数组的第一个元素
$('li').on('click',function(event){

  if (event.target !== this)
    return;

   var data = $(this).data();
   var $months = $('.months');
   var $year = $months.find('[data-year="'+data.year+'"]');

   $months.find('.year, .month').hide();

   switch(data.type){
    case 'year':
        $year.show().find('.month').show();
        break;
    case 'month':
        $year.show().find('[data-month="'+data.month+'"]').show();
        break;
   }


});

<div>
  <ul>
    <li class="year" data-type='year' data-year='2015'>
      2015
      <ul>
        <li class="month" data-type='month' data-year='2015' data-month='jan'>JAN</li>
        <li class="month" data-type='month' data-year='2015' data-month='feb'>FEB</li>
      </ul>
    </li>
    <li class="year" data-type='year' data-year='2014'>2014
      <ul>
        <li class="month" data-type='month' data-year='2014' data-month='jan'>JAN</li>
        <li class="month" data-type='month' data-year='2014' data-month='feb'>FEB</li>
      </ul>
    </li>
  </ul>
</div>

<div class="months">

  <div class="year" data-year="2015">
    <div class="month" data-month='jan'>
      <p>january 2015</p>
    </div>
    <div class="month" data-month='feb'>
      <p>february 2015</p>
    </div>
  </div>

  <div class="year" data-year="2014">
    <div class="month" data-month='jan'>
      <p>january 2014</p>
    </div>
    <div class="month" data-month='feb'>
      <p>february 2014</p>
    </div>
  </div>

</div>