时间戳

首页 > 解决方案 > JQuery在img点击时折叠div

javascript - JQuery在img点击时折叠div

问题描述

我有一个关于 CSS 样式和 JQuery 功能的两部分问题。

  1. （最重要的）：在我下面的代码中，当用户点击圆形头像时，假设应该出现“profiledrop”div。如果我用纯文本替换标签，代码就可以正常工作。但是，使用图像而不是文本作为链接，代码不再有效。

  2. （不太重要）：是什么导致“通知标签” div 如此之大？对于每个 div，它最终会达到近 100 像素，这是巨大的！我想要这个尺寸的至少一半。我需要修改 CSS 代码的哪一部分来完成此操作？

在过去的 10 个小时里，我一直在输入这段代码，所以此时我基本上已经脑残了。我确信这两个答案都很简单，但我只是没有看到解决方案。预先感谢您的帮助！

密码： https ://codepen.io/dansbyt/pen/xxgayPa ?editors=1010

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mrdansby.com/private/style.css">

<div class="dropdown-container">
  <div class="profile"><a href="#" id='launch'><img src='https://mrdansby.com/resources/pics/1.png'></a></div>
  <ul class="profiledrop">
    <li class="notification-group nopic">
      <div class="notification-tab">
        <h4>Tasks</h4>
        <span class="label">1</span>
      </div>
      <ul class="notification-list">
        <li class="notification-list-item">
          <p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
          <span class="date">2m ago</span>
        </li>
      </ul>
    </li>
    <li class="notification-group">
      <div class="notification-tab">
        <h4>Behavior</h4>
        <span class="label">4</span>
      </div>
      <ul class="notification-list">
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/4.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">5s ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/23.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">15m ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">5h ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/13.png">
          <p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
          <span class="date">3d ago</span>
        </li>
      </ul>
    </li>
    <li class="notification-group">
      <div class="notification-tab">
        <h4>Homework</h4>
        <span class="label">3/3</span>
      </div>
      <ul class="notification-list">
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
          <span class="date">3d ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
          <span class="date">3d ago</span>
        </li>
        <li class="notification-list-item">
          <img src="https://mrdansby.com/resources/pics/1.png">
          <p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
          <span class="date">3d ago</span>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS：

/* Notification Infastructure */
.profiledrop {
    position: absolute;
    right: 15px; top: 65px;
    display: none;
    width: 350px; height: auto;
    max-height: 600px;
    padding: 0; margin: 0;
    overflow-y: hidden;
    background: #eee;
    border-top: 4px solid #5B7042;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    -webkit-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);}

.notification-group{
  border-bottom: 1px solid #e3e3e3;
  overflow: hidden;}

.notification-tab {
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid #e3e3e3;}

.notification-list{
  height: 0px;
  max-height: 250px;
  padding: 0;
  overflow-y: auto;
  transition: height .5s;}

.notification-list-item{
  display: block;
  min-height: 60px;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 15px 15px 15px 10px;
  font-size: 16px;
  border-bottom: 1px solid #e3e3e3}
  .notification-list-item:nth-child(even) {background-color: #E3E3E3}

.notification-list-item img {
  clip-path: circle();
  float: left;
  margin-right: 10px;
  width: 60px; height: 60px;
  object-fit: cover}


/* Misc Settings */
.message::not(.nopic) {margin-top: 0px; margin-left: 80px}     /* Style for notification groups without image */


/* Notification text styling */
.label{
  float: right;
  padding: 0px 7px;
  margin-top: 20px;
  margin-right: 10px;
  border: 1px solid #5B7042;
  border-radius: 15px;}
  h4 {margin-left: 10px}
  h4, .label{display: inline-block;}

.message {margin-top: 0px}
.date {float: right; color: darkgray}


/* Active Section */
.active .notification-list {height: 250px;}
.active .notification-tab, .notification-tab:hover {background-color: #5B7042}
.active .label, .notification-tab:hover .label {border: 1px solid white}
.notification-tab:hover {color: white}
.active .label, .active h4 {color: white}


/* Responsive design */
@media only screen and (max-width : 514px) {
  body {margin: 0px}
  .profiledrop{
    width: 100%;
    margin: 0px;
    left: 0;}
}



.profile{
  position: absolute;
  top: 0%; right: 15px;
  width: 40px;
  clip-path: circle();}
  .profile img{float:right; max-width: 100%; max-height: 100%; display: block;}

查询：

// Tab collapser //
$('.notification-tab').click(function(e){
  if($(e.currentTarget).parent().hasClass('active')){
    $('.notification-group').removeClass('active');
  } else{
    $('.notification-group').removeClass('active');
    $(e.currentTarget).parent().toggleClass('active');
  }
});

// Click outside collapser //
$(document).on('click', function(e) {
  if (e.target.id != "launch") {
    if ($(e.target).closest(".profiledrop").length === 0) {
      $(".profiledrop").hide();
    }
  }
});

// Menu Launcher //
$("#launch").click(function() {
  $(".profiledrop").show();
});

标签： javascriptjquerycss

解决方案

'launch' 应该在 img 元素上，例如：

<div class="profile">
    <a href="#">
        <img id='launch' src='https://mrdansby.com/resources/pics/1.png'>
    </a>
</div>

推荐阅读