展开并折叠无序列表 [英] Expand and Collapse Unordered List

问题描述

我需要使用无序列表执行展开和折叠。我使用以下代码。

I need to perform expand and collapse with unordered list. I am using the following code.

<style type="text/css">
        ul li ul
        {
            display: none;
        }
        ul
        {
            color: Blue;
            list-style: none;
        }
    </style>
    <script src="../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.list > li img').click(function () {
                $(this).parent().find('ul').toggle();
                $('.list > li img').css('src', '../Image/toggle-small-expand.png');
            });
        });
    </script>

<div>
      <ul class="list">
          <li><img src="../Image/toggle-small.png" alt="" />Main1
              <ul>
                  <li>M16</li>
                  <li>MP5</li>
                  <li>AR15</li>
                  <li>M16A1</li>
              </ul>
          </li>
          <li><img src="../Image/toggle-small.png" alt="" />Main2
              <ul>
                  <li>Magnum</li>
                  <li>Colt</li>
              </ul>
          </li>
      </ul>
  </div>

问题是： - 我需要在扩展时更改图像，但它无法正常工作。我的代码有什么问题请帮帮我。我正在使用以下代码执行此操作： -



$（'。list> li img'）。css（'src'，'.. / Image /toggle-small-expand.png');

The problem is:- I need to change image on expand but it is not working. What is the problem with my code please help me. i am using the follwing code to do this:-

$('.list > li img').css('src', '../Image/toggle-small-expand.png');

推荐答案

（document）.ready（function（）{

(document).ready(function () {

（ '.list> li img'）。click（function（）{

('.list > li img').click(function () {

（this）.parent（）。find（'ul'）。toggle（）;

(this).parent().find('ul').toggle();

这篇关于展开并折叠无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！