Question

什么是切换新“Bootstrap 4”[hidden] -Attribute的最佳方法。不只是隐藏和显示带有“display：block”的元素，而是删除并添加属性。

<button type="button" hidden class="hideMe btn  btn-sm">Get Video</button> 
<button class="toggle">toggle</button>

是否有更好的方式：http://jsfiddle.net/49u2q/123/

$('button.toggle').on('click',function() {
    if ($('button.hideMe ').is('[hidden]')) {
        $('button.hideMe ').removeAttr('hidden');
    } else {
        $('button.hideMe ').attr('hidden','');
    }
});

Answer 1

使用 toggle()

＆＃13;

$('button.toggle').on('click',function() {
  var bool=$(".video_btn").is(":hidden")
  $(".video_btn").toggleClass('hidden')
  $(".video_btn").attr('hidden',!bool)
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" hidden class="hidden video_btn btn  btn-sm">Get Video</button>

<button class="toggle">toggle</button>

＆＃13;

Answer 2

您可以使用解决方案

$(document).on('click', 'button.toggle', function() {
  if ($(this).siblings('button.hidden').is('[hidden]')) {
    $(this).siblings('button.hidden').removeAttr('hidden');
  } else {
    $(this).siblings('button.hidden').attr('hidden','');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" hidden class="hidden btn  btn-sm">Get Video</button>
<button class="toggle">toggle</button>

希望这会对你有所帮助。

Answer 3

我看到你正在寻找隐藏属性，所以试试这个：

＆＃13;

$('button.toggle').on('click', function() {
    if ($("button.hideMe").attr("hidden")) {
        $("button.hideMe").attr("hidden", false)
    } else $("button.hideMe").attr("hidden", true)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" hidden class="hideMe btn  btn-sm">Get Video</button> 
<button class="toggle">toggle</button>

＆＃13;

Answer 4

好的，这是一个写入插件解决方案：我认为它没有任何插件和现有的jquery函数： - （

https://asana.com/developers/documentation/getting-started/input-output-options

$.fn.toggleAttr = function(attr) {
  return this.each(function() {
    var self = $(this);
        if (self.is('['+attr+']')) {
        self.removeAttr(attr)
    }else{
      self.attr(attr,1)
    }
  });
};


$('button.toggle').on('click',function() {
$('.hiddens').toggleAttr('hidden');

});

jQuery Toggle [hidden]属性Bootstrap 4

4 个答案: