使用javascript删除对象

r8xiu3jd 于 2022-12-28 发布在 Java

关注(0)|答案(1)|浏览(132)

我使用下面的代码设计了一个小面板，用户单击它就可以看到内容：

$('.body_panel').find('li').click(function() {
        if ($(this).has("ul")) {
            $(this).children('.icon-title-right_panel').hide();
            $(this).children('.icon-title-down_panel').show();
        } else {
            $(this).children('.icon-title-right_panel').show();
            $(this).children('.icon-title-down_panel').hide();
        }
    });

$('.MyPanel').find('li').click(function(evt) {
  evt.stopPropagation();
  $(this).children('ul').slideToggle();
});

.MyPanel ul li {
  cursor: pointer;
  position: relative;
}

.MyPanel ul li .icon-title-right_panel,
.MyPanel ul li .icon-title-down_panel {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 30px;
}

.MyPanel ul li .icon-title-down_panel {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>

<div class="MyPanel">

  <ul class="body_panel">
    <li class="title_panel">

      <h5>title</h5>

      <span class="fas fa-circle-chevron-right icon-title-right_panel"></span> 
      <span class="fas fa-circle-chevron-down icon-title-down_panel"></span> 

      <ul class="box-contect_panel">
        <li class="contect_panel">

          <h1>contect</h1>

        </li>
      </ul>
    </li>
  </ul>

</div>

单击右侧任何图标的标题，它将被删除。再次单击它将出现。
如我在脚本代码中指定的;我应该编写什么替代代码来删除右侧的图标，方法是单击标题，然后出现底部的图标？

JavaScript

来源：https://stackoverflow.com/questions/74924555/delete-object-with-javascript

1条答案

按热度按时间

juud5qan1#

请尝试这样做。关键是捕捉切换状态时，你点击li。

$('.body_panel').find('li').click(function() {
      if($(this).parent().find("ul").eq(0).is(':visible')) {
        
        $(this).children('.icon-title-right_panel').show();
                    $(this).children('.icon-title-down_panel').hide();
        
      } else {
        $(this).children('.icon-title-right_panel').hide();
                    $(this).children('.icon-title-down_panel').show();
      }
               
            });
    
            $('.MyPanel').find('li').click(function(evt) {
                evt.stopPropagation();
                $(this).children('ul').slideToggle();
            });


    .MyPanel ul li {
                cursor: pointer;
                position: relative;
            }
            
            .MyPanel ul li .icon-title-right_panel,
            .MyPanel ul li .icon-title-down_panel {
                position: absolute;
                top: 0;
                right: 0;
                font-size: 30px;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>

<div class="MyPanel">

  <ul class="body_panel">
    <li class="title_panel">

      <h5>title</h5>

      <span class="fas fa-circle-chevron-right icon-title-right_panel"></span> 
      <span class="fas fa-circle-chevron-down icon-title-down_panel"></span> 

      <ul class="box-contect_panel">
        <li class="contect_panel">

          <h1>contect</h1>

        </li>
      </ul>
    </li>
  </ul>

</div>

赞(0）回复(0）举报 2022-12-28

我来回答

使用javascript删除对象

1条答案

相关问题

热门标签

最新问答