Question

我试图打开一个成分复选框，它只是没有动画。

如此主题所述，遵循我的代码：

HTML

 ManagementClass mc = new ManagementClass("Win32_ComputerSystem");
        ManagementObjectCollection moc = mc.GetInstances();
        if (moc.Count != 0)
        {
            foreach (ManagementObject MO in mc.GetInstances())
            {
                try
                {
                    computerSystemDetails["TotalPhysicalMemory"] = (MO["TotalPhysicalMemory"] == null) ? new string[] { } : new string[] { MO["TotalPhysicalMemory"].ToString() };
                }
                catch (Exception ex)
                {
                    logger.Error("GetSystemDetails", "Error occurred when retrieving the computer system information", ex);
                }
            }
        }
        return computerSystemDetails;

的Javascript

<div class="col-xs-12">
    <div class="recipePicContainer">
        <div id="checkBoxes">
                <li class="recipe"></li>
                       <ul>
                           <ul><input type="checkbox"> ingredient 1</ul>
                           <ul><input type="checkbox"> ingredient 2</ul>
                           <ul><input type="checkbox"> ingredient 3</ul>
                           <ul><input type="checkbox"> ingredient 4</ul>
                           <ul>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ul>
                       </ul>
                </div>
            </div>
        </div>

Thanx家伙！

Answer 1

这是你正在寻找的吗？用.fadeIn()淡化它。还为包含所有复选框的ul添加了ID。

＆＃13;

$(document).ready(function(){
     $('#ingredients').hide();
     $('.recipe').click(function () {
         $('#ingredients').fadeIn();
     });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
  <div class="recipePicContainer">
    <div id="checkBoxes">
        <li class="recipe">Click me</li>
           <ul id="ingredients">
             <ul><input type="checkbox"> ingredient 1</ul>
             <ul><input type="checkbox"> ingredient 2</ul>
             <ul><input type="checkbox"> ingredient 3</ul>
             <ul><input type="checkbox"> ingredient 4</ul>
             <ul>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ul>
         </ul>
    </div>
  </div>
</div>

＆＃13;

Answer 2

成分是否需要单独的ul元素？将这些更改为li元素可以解决问题。

我还建议在元素上使用类并根据这些类进行选择，而不是选择和切换页面上的所有ul元素。

＆＃13;

var main = function() {
  $(document).ready(function() {
    $('ul').hide();
    $('.recipe').click(function() {
      $('ul').toggle("slow");
    });
  });
};
$(document).ready(main);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
  <div class="recipePicContainer">
    <div id="checkBoxes">
      <li class="recipe">Click</li>
      <ul>
        <li><input type="checkbox"> ingredient 1</li>
        <li><input type="checkbox"> ingredient 2</li>
        <li><input type="checkbox"> ingredient 3</li>
        <li><input type="checkbox"> ingredient 4</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

Answer 3

检查

https://jsfiddle.net/sandmehta2014/ccy7s0pe/

我刚改变了以下内容：

<li class="recipe"> 
                       <ul>
                           <li><input type="checkbox"> ingredient 1</li>
                           <li><input type="checkbox"> ingredient 2</li>
                           <li><input type="checkbox"> ingredient 3</li>
                           <li><input type="checkbox"> ingredient 4</li>
                           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                       </ul>
                      </li>

我猜你已经用ul取代了li。

在li中切换ul仅在关闭时动画

3 个答案: