admin管理员组

文章数量:1410705

How can we handle multiple toggleclass in 1 div it gets so annoying when I click maximize button or close button the minimize function will fire too. How can we handle that?

How can we handle multiple toggleclass in 1 div it gets so annoying when I click maximize button or close button the minimize function will fire too. How can we handle that?

    jQuery(($) => {

    const $chatbox = $(".chatbox");
    const $open = $(".open-chatbox");
    const $minimize = $(".minimize-chatbox");
    const $maximize = $(".maximize-chatbox");
    const $close = $(".close-chatbox");
    const $chatboxTextarea = $("textarea");
  
    $open.on("click", function() {
      const $showChatbox = $chatbox.removeClass("hide-chatbox");
      console.log($showChatbox);
    });

    $minimize.on("click", function() {
        const $minimizeChatbox = $chatbox.toggleClass("minimize");
        console.log($minimizeChatbox);
    });

    let maximized = false;
    $maximize.on("click", function() {
        const $maximizeChatbox = $chatbox.toggleClass("maximize");
        maximized = !maximized;
        $chatboxTextarea.attr("rows", maximized ? 6 : null);
        console.log($maximizeChatbox);
    });

    $close.on("click", function() {
      const $hideChatbox = $chatbox.addClass("hide-chatbox");
      console.log($hideChatbox);
    });

  });
.body {
  width: 100%;
  position: relative;
}

.chatbox {
    position: fixed;
    height: 397px;
    border-radius: 5px 5px 0 0;
    z-index: 10000;
    width: 325px;
    bottom: -30px;
    right: 30px;
}

.chatbox .card-header {
    color: #303030;
    border-bottom: solid 1px #8b8b8b4d;
    font-weight: 500;
    font-size: 16px;
    padding: 10px 10px 5px 10px;
}

.chatbox .card-header span.icons {
    float: right;
    color: #BEC2C9;
}

.chatbox .card-header .icons i.material-icons {
    font-size: 18px;
    margin-right: 5px;
    cursor: pointer;
}

.chatbox .card-body {
    padding: 0 5px 0 5px;
}

.chatbox .card-footer {
    border-top: solid 1px #8b8b8b4d !important;
    margin: 0 !important;
}

.form-group.type-area {
    display: flex;
    margin: 0;
    padding: 0;
}

.type-area textarea {
    width: 300px;
    border: none !important;
    padding: 0 0 0 10px;
    margin: 0;
}

.type-area .form-control:hover {
    box-shadow: none;
}

.type-area button.btn.btn-link {
    padding: 0;
    margin: 0;
}

.chatbox.hide-chatbox {
    display: none;
}

.chatbox.maximize {
    width: 800px;
    height: 527px;
}

.chatbox.minimize {
    height: 40px;
}

.chatbox.maximize textarea {
    width: 775px;
}

.chatbox.maximize .send {
    margin-top: 60px;
}

.minimize .maximize-chatbox {
    display: none;
}
<script src=".5.2/js/bootstrap.min.js"></script>
<script src=".js/1.16.0/umd/popper.min.js"></script>
<script src=".3.1/jquery.min.js"></script>
<link href=".5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src=".3.1/jquery.min.js"></script>
<link href="+Icons"
      rel="stylesheet">
<body>
<button type="button" rel="tooltip" title="Message" class="btn btn-primary btn-link btn-sm open-chatbox">
                                <i class="material-icons">chat_bubble</i>
                              </button>
  <div class="card chatbox hide-chatbox">
      <div class="card-header minimize-chatbox">
          Featured
          <span class="icons">
          <i class="material-icons maximize-chatbox">web_asset</i>
          <i class="material-icons close-chatbox">close</i>
          </span>
      </div>
      <div class="card-body">
          This is some text within a card body.
      </div>
      <div class="card-footer">
          <form>
          <div class="form-group type-area">
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Type a message..."></textarea>
              <button type="button" class="btn btn-link"><i class="material-icons send">send</i></button>
          </div>
          </form>
      </div>
  </div>
  
</body>

How can we handle multiple toggleclass in 1 div it gets so annoying when I click maximize button or close button the minimize function will fire too. How can we handle that?

How can we handle multiple toggleclass in 1 div it gets so annoying when I click maximize button or close button the minimize function will fire too. How can we handle that?

    jQuery(($) => {

    const $chatbox = $(".chatbox");
    const $open = $(".open-chatbox");
    const $minimize = $(".minimize-chatbox");
    const $maximize = $(".maximize-chatbox");
    const $close = $(".close-chatbox");
    const $chatboxTextarea = $("textarea");
  
    $open.on("click", function() {
      const $showChatbox = $chatbox.removeClass("hide-chatbox");
      console.log($showChatbox);
    });

    $minimize.on("click", function() {
        const $minimizeChatbox = $chatbox.toggleClass("minimize");
        console.log($minimizeChatbox);
    });

    let maximized = false;
    $maximize.on("click", function() {
        const $maximizeChatbox = $chatbox.toggleClass("maximize");
        maximized = !maximized;
        $chatboxTextarea.attr("rows", maximized ? 6 : null);
        console.log($maximizeChatbox);
    });

    $close.on("click", function() {
      const $hideChatbox = $chatbox.addClass("hide-chatbox");
      console.log($hideChatbox);
    });

  });
.body {
  width: 100%;
  position: relative;
}

.chatbox {
    position: fixed;
    height: 397px;
    border-radius: 5px 5px 0 0;
    z-index: 10000;
    width: 325px;
    bottom: -30px;
    right: 30px;
}

.chatbox .card-header {
    color: #303030;
    border-bottom: solid 1px #8b8b8b4d;
    font-weight: 500;
    font-size: 16px;
    padding: 10px 10px 5px 10px;
}

.chatbox .card-header span.icons {
    float: right;
    color: #BEC2C9;
}

.chatbox .card-header .icons i.material-icons {
    font-size: 18px;
    margin-right: 5px;
    cursor: pointer;
}

.chatbox .card-body {
    padding: 0 5px 0 5px;
}

.chatbox .card-footer {
    border-top: solid 1px #8b8b8b4d !important;
    margin: 0 !important;
}

.form-group.type-area {
    display: flex;
    margin: 0;
    padding: 0;
}

.type-area textarea {
    width: 300px;
    border: none !important;
    padding: 0 0 0 10px;
    margin: 0;
}

.type-area .form-control:hover {
    box-shadow: none;
}

.type-area button.btn.btn-link {
    padding: 0;
    margin: 0;
}

.chatbox.hide-chatbox {
    display: none;
}

.chatbox.maximize {
    width: 800px;
    height: 527px;
}

.chatbox.minimize {
    height: 40px;
}

.chatbox.maximize textarea {
    width: 775px;
}

.chatbox.maximize .send {
    margin-top: 60px;
}

.minimize .maximize-chatbox {
    display: none;
}
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis./icon?family=Material+Icons"
      rel="stylesheet">
<body>
<button type="button" rel="tooltip" title="Message" class="btn btn-primary btn-link btn-sm open-chatbox">
                                <i class="material-icons">chat_bubble</i>
                              </button>
  <div class="card chatbox hide-chatbox">
      <div class="card-header minimize-chatbox">
          Featured
          <span class="icons">
          <i class="material-icons maximize-chatbox">web_asset</i>
          <i class="material-icons close-chatbox">close</i>
          </span>
      </div>
      <div class="card-body">
          This is some text within a card body.
      </div>
      <div class="card-footer">
          <form>
          <div class="form-group type-area">
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Type a message..."></textarea>
              <button type="button" class="btn btn-link"><i class="material-icons send">send</i></button>
          </div>
          </form>
      </div>
  </div>
  
</body>

  • javascript
  • jquery
Share edited Aug 30, 2020 at 4:59 frustrated-dev asked Aug 29, 2020 at 18:18 frustrated-devfrustrated-dev 4519 silver badges32 bronze badges 3
  • just chain it $maximize.on("click", function() { $chatbox.addClass("maximize").removeClass("minimize"); }); – Daniel A. White Commented Aug 29, 2020 at 18:21
  • still didn't work – frustrated-dev Commented Aug 29, 2020 at 18:25
  • People could help better if you provide html code they can use to test your issue , not an image. Why not upload images of code/errors when asking a question?. It's not obvious from what is shown and from your description what the specific problem is. See also minimal reproducible example – charlietfl Commented Aug 29, 2020 at 18:41
Add a ment  | 

3 Answers 3

Reset to default 4

Take a look at snippet below:

UPDATE 1:

Also you do not need to know a class is exists in this situation, just remove the class, if it is exists, it'll be remove if it's not, nothing happening.

UPDATE 2:

According to your codes, you specify a minimize button but there is no problem to remove that.

If you have problem with toggleClass() you don't need to use it, just think about a workaround like using hasClass() instead. With this approach you can change text or icon of resize too.

(function ($) {
  'use strict';

  $(function () {
    const $chatbox = $(".chatbox");
    const $open = $(".open-chatbox");
    const $maximize = $(".maximize-toggle-chatbox");
    const $close = $(".close-chatbox");
    
    function logClass(element) {
      console.log(element.attr('class'));
    }
  
    // chatbox open button click event
    $open.on("click", function() {
      // if there is no selector for chatbox
      if(!$(this).attr('data-for')) return;
      
      const current_chatbox = $($(this).attr('data-for'));
      
      // if there is no selector present with specific selector
      if(!current_chatbox.length) return;
      
      current_chatbox.removeClass("hide-chatbox");
      
      // log classes of chatbox
      logClass(current_chatbox);
    });

    // chatbox maximize button click event
    $maximize.on("click", function() {
      const current_chatbox = $(this).closest('.chatbox');
      if(current_chatbox.hasClass('maximize')) {
        current_chatbox.removeClass("maximize").addClass('minimize');
        $(this).text('maximize chat');
      } else {
        current_chatbox.removeClass("minimize").addClass('maximize');
        $(this).text('minimize chat');
      }
      
      // log classes of chatbox
      logClass(current_chatbox);
    });

    // chatbox close button click event
    $close.on("click", function() {
      const current_chatbox = $(this).closest('.chatbox');
      current_chatbox.addClass("hide-chatbox");
      
      // log classes of chatbox
      logClass(current_chatbox);
    });
  });
})(jQuery);
.chatbox {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background-color: #ccc;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
}

.maximize {
  width: 100%;
  height: 100%;
}

.hide-chatbox {
  display: none;
}
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="open-chatbox" type="button" data-for="#theChatbox">
  open chat
</button>

<div class="chatbox hide-chatbox" id="theChatbox">
  <button class="close-chatbox" type="button">
    close chat
  </button>
  
  <button class="maximize-toggle-chatbox" type="button">
    maximize chat
  </button>
</div>

From jQuery documentation You can toggle one or more classes by passing them in separated by spaces so you can just call .toggleClass("minimize maximize") and they'll flip automatically. Of course your initial state should be one of those already applied.

.toggleClass(className): One or more classes (separated by spaces) to be toggled for each element in the matched set.

There's also an overload that accepts an array of classes

In case one of the buttons triggers other click events, perhaps it Bubbles see stopPropagation or preventDefault for more info, the difference is that stopPropagation will still allow for the default event action to be executed

In your case you can use

$open.on("click", function(event) {
  event.stopPropagation();
  $chatbox.removeClass("hide-chatbox");
});

Use jquery hasClass

    $maximize.on("click", function() {
      
      if($(this).closest('.chatbox').hasClass('maximize')) {
        // chatbox hasClass  maxiremove it and add min
        $(this).closest('.chatbox').removeClass("maximize").addClass('minimize');
        $(this).text('maximize chat');
      } else {
        current_chatbox.removeClass("minimize").addClass('maximize');
        $(this).text('minimize chat');
      }
      
      // log classes of chatbox
      logClass(current_chatbox);
    });

本文标签： javascriptHow to remove class if existStack Overflow

版权声明：本文标题：javascript - How to remove class if exist? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745044674a2639289.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。