Question

如何隐藏“li”手风琴项目中的内部“ul”列表？

CODEPEN LINK ：http://codepen.io/Steve-Jones/pen/pbVOKj

JS （function（$）{ $（'。accordion＆gt; li：eq（0）a'）。addClass（'active'）。next（）。slideDown（）;

    $('.accordion a').click(function(j) {
        var dropDown = $(this).closest('li').find('p');

        $(this).closest('.accordion').find('p').not(dropDown).slideUp();

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        } else {
            $(this).closest('.accordion').find('a.active').removeClass('active');
            $(this).addClass('active');
        }

        dropDown.stop(false, true).slideToggle();

        j.preventDefault();
    });
})(jQuery);

HTML

<ul class="accordion">
    <li>
        <a>FAQ: Vegetarian-Friendly Diet</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro
            minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
    </li>
    <li>
        <a>FAQ: Snacking at Work</a>
        <p>What are some convenient things that I can snack on while at work?</p>
        <p>Most major grocery chains and specialty grocers sell pre-cut veggies. These typically include a variety of peppers, cucumbers, broccoli florets, cauliflower, the microwaved heart of your office nemesis. Wait, the lawyers say we have to strike that last
            one. Most of these same stores also carry pre-packaged cherry tomatoes. All of those veggies are convenient to snack on throughout the day. And feel free to add the low-fat or fat/sugar free flavor enhancer of your choice and have at it. The only downside
            to this pre-cut veggie option is that pre-cut/packaged veggies are slightly more expensive than buying your veggies whole and cutting them yourself.</p>
        <p>Here are a few other, convenient, non-veggie ideas:</p>
        <ul class="accordion-inner-list">
            <li>Powdered peanut butter, like PB2, adds a ton of flavor to celery which is again easy to snack on</li>
            <li>Tuna straight out of the pouch is easy. You can mix it with non-fat greek yogurt, mustard, or avocado</li>
            <li>If you have a boat, and an extra 10 hours in your workday, go fishing for the real thing</li>
            <li>Individually packaged plain (0% fat) greek yogurt is easy to keep at your desk</li>
            <li>Almonds, walnuts, and pistachios (come the season) are easy to store in your desk; they can also be used as projectiles in case an office food fight breaks out</li>
            <li>Protein shake; or if you have access to a blender and ice, you can make a ManUP-approved smoothie (feel free to add in oats too for a carb serving)</li>
        </ul>
    </li>
    <li>
        <a>FAQ: Food Burnout</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro
            minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
    </li>
</ul>
<!-- / accordion -->

CSS

.accordion {
    max-width: 560px;
    margin: 0 auto 100px;
    border-top: 1px solid #d9e5e8;
}

.accordion li {
    border-bottom: 1px solid #d9e5e8;
    position: relative;
}

.accordion li p {
    display: none;
    padding: 10px 25px 30px;
    color: #6b97a4;
}

.accordion a {
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 600;
    line-height: 3;
    font-size: 14px;
    font-size: 0.875rem;
    text-indent: 15px;
    user-select: none;
}

.accordion a:after {
    width: 8px;
    height: 8px;
    border-right: 1px solid #4a6e78;
    border-bottom: 1px solid #4a6e78;
    position: absolute;
    right: 10px;
    content: " ";
    top: 17px;
    transform: rotate(-45deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.accordion p {
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 2;
    padding: 10px;
}

/* ul li ul {
    display: none;
} */

a.active:after {
    transform: rotate(45deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

Answer 1

$('.accordion li ul').hide();

这意味着ul在li里面，accordion位于Include()类的元素内。

Answer 2

您可以使用toggle：

＆＃13;

$(function () {
  (function($) {
    $('.accordion > li:eq(0) a').addClass('active').next().slideDown();
  
  
  
  
    // start with toggling the ul.accordion-inner-list
    $('.accordion').find('ul.accordion-inner-list').toggle();

  
  
    $('.accordion a').click(function(j) {
      var dropDown = $(this).closest('li').find('p');

      $(this).closest('.accordion').find('p').not(dropDown).slideUp();

      if ($(this).hasClass('active')) {
        $(this).removeClass('active');
      } else {
        $(this).closest('.accordion').find('a.active').removeClass('active');
        $(this).addClass('active');
      }
      
      
      // before or after slideToggle you need to toggle also this element
      // if this element (ul.accordion-inner-list) does not exist
      // jQuery does nothing, so don't worry
      $(this).closest('li').find('ul.accordion-inner-list').toggle();

      
      
      dropDown.stop(false, true).slideToggle();

      j.preventDefault();
    });
  })(jQuery);
});

＆＃13;

.accordion {
  max-width: 560px;
  margin: 0 auto 100px;
  border-top: 1px solid #d9e5e8;
}

.accordion li {
  border-bottom: 1px solid #d9e5e8;
  position: relative;
}

.accordion li p {
  display: none;
  padding: 10px 25px 30px;
  color: #6b97a4;
}

.accordion a {
  width: 100%;
  display: block;
  cursor: pointer;
  font-weight: 600;
  line-height: 3;
  font-size: 14px;
  font-size: 0.875rem;
  text-indent: 15px;
  user-select: none;
}

.accordion a:after {
  width: 8px;
  height: 8px;
  border-right: 1px solid #4a6e78;
  border-bottom: 1px solid #4a6e78;
  position: absolute;
  right: 10px;
  content: " ";
  top: 17px;
  transform: rotate(-45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.accordion p {
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 2;
  padding: 10px;
}

/* ul li ul {
display: none;
} */

a.active:after {
  transform: rotate(45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<ul class="accordion">
    <li>
        <a>FAQ: Vegetarian-Friendly Diet</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro
            minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
    </li>
    <li>
        <a>FAQ: Snacking at Work</a>
        <p>What are some convenient things that I can snack on while at work?</p>
        <p>Most major grocery chains and specialty grocers sell pre-cut veggies. These typically include a variety of peppers, cucumbers, broccoli florets, cauliflower, the microwaved heart of your office nemesis. Wait, the lawyers say we have to strike that last
            one. Most of these same stores also carry pre-packaged cherry tomatoes. All of those veggies are convenient to snack on throughout the day. And feel free to add the low-fat or fat/sugar free flavor enhancer of your choice and have at it. The only downside
            to this pre-cut veggie option is that pre-cut/packaged veggies are slightly more expensive than buying your veggies whole and cutting them yourself.</p>
        <p>Here are a few other, convenient, non-veggie ideas:</p>
        <ul class="accordion-inner-list">
            <li>Powdered peanut butter, like PB2, adds a ton of flavor to celery which is again easy to snack on</li>
            <li>Tuna straight out of the pouch is easy. You can mix it with non-fat greek yogurt, mustard, or avocado</li>
            <li>If you have a boat, and an extra 10 hours in your workday, go fishing for the real thing</li>
            <li>Individually packaged plain (0% fat) greek yogurt is easy to keep at your desk</li>
            <li>Almonds, walnuts, and pistachios (come the season) are easy to store in your desk; they can also be used as projectiles in case an office food fight breaks out</li>
            <li>Protein shake; or if you have access to a blender and ice, you can make a ManUP-approved smoothie (feel free to add in oats too for a carb serving)</li>
        </ul>
    </li>
    <li>
        <a>FAQ: Food Burnout</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro
            minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
    </li>
</ul>
<!-- / accordion -->

＆＃13;

JS在Accordion中隐藏嵌套列表

2 个答案: