javascript - bootstrap 4 hide element using js - Stack Overflow

admin管理员组

文章数量:1426066

I want to hide some elements on the page that use the class 'd-md-block'. Because of the important on the class definition i can not use jquery hide/show functions.

Example, i want an element to be visible on desktop

<div id="test" class="d-none d-md-block">Wele User!</div>

The visibility works as expected. Then when a user clicks a button i want to toggle the visibility (this fails due to the d-md-none class)

 $('#btn').on('click',function(){$('#test').hide();});
   $('#anotherBtn').on('click',function(){$('#test').show();});

Any idea how to fix this ?

I want to hide some elements on the page that use the class 'd-md-block'. Because of the important on the class definition i can not use jquery hide/show functions.

Example, i want an element to be visible on desktop

<div id="test" class="d-none d-md-block">Wele User!</div>

The visibility works as expected. Then when a user clicks a button i want to toggle the visibility (this fails due to the d-md-none class)

 $('#btn').on('click',function(){$('#test').hide();});
   $('#anotherBtn').on('click',function(){$('#test').show();});

Any idea how to fix this ?

• javascript
• jquery
• twitter-bootstrap
• bootstrap-4

Share Improve this question Follow edited Aug 27, 2018 at 7:05 user1521944 asked Aug 27, 2018 at 6:45 user1521944user1521944 33711 gold badge22 silver badges1414 bronze badges 3

• how do say it fails due to d-md-block class? – Thamaraiselvam Commented Aug 27, 2018 at 6:50
• 1 @Thamaraiselvam it actually fails due to d-none class it has display: none !imporatant property – Ankit Agarwal Commented Aug 27, 2018 at 6:52
• yes correct is due to d-none class but this is not the point... any idea who be able to work with the jquery visibility functions and these classes ? – user1521944 Commented Aug 27, 2018 at 7:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

There is a simple work around for showing and hiding the element in bootstrap-4. As d-none class assigns display: none !imporatant property, you can simply add and remove this class via JavaScript to simulate the hide and show operations. Something like this:

$('#btn').on('click', function() {
  $('#test').removeClass('d-block')
});
$('#anotherBtn').on('click', function() {
  $('#test').addClass('d-block');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css">
<div id="test" class="d-none d-md-block">Wele User!</div>
<button id='btn'>Hide</button>
<button id='anotherBtn'>Show</button>

本文标签： javascriptbootstrap 4 hide element using jsStack Overflow