如何通过拨动开关上的类通过 div 隐藏/显示

Question

我必须实现一个切换开关，如果你第一次点击一个具有特定类的 div 将被隐藏。如果再次单击它，则应再次显示 div。直到现在我试图用一个小的 jquery 脚本来解决它。我不得不说，我不是 jquery 专家。因此，如果您对其他脚本语言有更好的解决方案，我愿意为您提供输入 ;-)

隐藏部分完美运行。只有第二次点击后再次显示 div 的部分不起作用。

这就是我到现在为止的代码：

html：

<label class="switch"><input type="checkbox"><span class="slider round hide-off"></a></span></label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

jquery：

$(document).ready(function(){

  $(".hide-off").click(function(){
    $(".hideme").hide();
    $(this).removeClass('hide-off');
    $(this).addClass('hide-on');
  });

  $(".hide-on").click(function(){
    $(".hideme").show();
    $(this).removeClass('hide-on');
    $(this).addClass('hide-off');
  });

});

在此处找到包括 CSS/样式在内的整个代码...：https://jsfiddle.net/r9newfmb/1/

Answer 1

我会检查复选框的状态。

$(document).ready(function(){
  $(".switch input").on("change", function(e) {
    const isOn = e.currentTarget.checked;

    if (isOn) {
        $(".hideme").hide();
    } else {
        $(".hideme").show();
    }
  });
});

林在这里：https://jsfiddle.net/o8ruye1k/3/

Answer 2

您可以使用 jQuery 切换功能轻松做到这一点

$(document).ready(function(){

$(".toggle-switch").click(function(){
  $(".hideme").toggle();
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch"><input type="checkbox"><span class="slider round toggle-switch"></a></span></label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

Answer 3

使用 javascript，您可以轻松切换 css 类。

let cb = document.getElementsByTagName("input");
cb[0].addEventListener("click",function(e) { 
        let myDivs = document.getElementsByClassName("hideme");
        myDivs[0].classList.toggle("hide");
    });

.hide{
display: none;
}

<label class="switch">
<input type="checkbox">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

Answer 4

试试这个，香草 JS。

<button data-toggle="">Hide/Show</button>

<p data-toggle-this="">Hello</p>

我认为纯/香草 JS 会更容易。

document.querySelector('[data-toggle]').addEventListener('click', (item) => {
 const toggle = document.querySelector('[data-toggle-this]')
 const isVisible = toggle.classList.contains('show') // Here we check that our element has class show
 if (isVisible) {
  toggle.classList.remove('show') // Here we remove class if it is
 } else {
  toggle.classList.add('show') // Here we added class
 }
})

Answer 5

更有可能是您的代码，但您的“隐藏”功能不起作用

$(document).on('click', '.hide-off', function () {
  $('.hideme').hide();
  $(this).removeClass('hide-off');
  $(this).addClass('hide-on');
})

$(document).on('click', '.hide-on', function () {
  $('.hideme').show();
  $(this).removeClass('hide-on');
  $(this).addClass('hide-off');
})

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/*END OF TOGGLE SWITCH*/



.hideme {
  padding:20px;
  background: blue;
  color: white;
  font-weight: 800;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch"><input type="checkbox"><span class="slider round hide-off"></span></label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>