如果使用ul标签，为什么不能向上滑动？

Question

I want to pull up/slide up my Html "p" tag when my page has been loaded.

This jQuery code works fine and does that:

$(function () {
    $('.graybgc').slideUp(0);
});

HTML:

<p class="graybgc">
    <span>A: </span>abcd.....
</p>

But when I put some tags like ul, it doesn't works and doesn't pull up HTML p tag.

 <p class="graybgc">
       <span>A: </span>
          <ul >
            <li>123</li>
             <li>123</li>
          </ul>
</p>

Answer 1

You cannot put a ul tag inside of a p tag. Please check HTML specification .

Here is a working example using div tag (JSFiddle: https://jsfiddle.net/Hulothe/sa09gu46/ ) :

 $('.graybgc').on('click', function() { $(this).slideUp(0); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="graybgc" > <span>A: </span> <ul> <li>123</li> <li>123</li> </ul> </div> 

Answer 2

Use <DIV> instead of <p>

<div class="graybgc">
       <span>A: </span>
          <ul >
            <li>123</li>
             <li>123</li>
          </ul>
</div>

Answer 3

 $('.graybgc').on('click', function() { $(this).slideUp("slow"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="graybgc" style="background:red" > <span>A: </span> <ul> <li>123</li> <li>123</li> </ul> </div>