3

我有一个引导进度条，当宽度属性更改时会更改当前进度。我想更改此宽度属性并在用户将其打开时添加 10%，并在用户将其关闭时减少 10%。

这是我的代码：

<div class="progress progress-danger progress-striped active"> 
       <div class="bar" style="width:30%"></div>
</div>

<a id="updateit">Click to change the progress</a>



$(function(){
  $("#updateit").toggle(function(){
     $('.bar').css("width", + '10%');
  });
});


提前致谢！:)

4

3 回答 3

2

这是一个工作小提琴

你不能添加百分比（我相信），所以我使用.progress.

0.1 = 10%

$(function(){
  $("#updateit").toggle(
   function(){
     $('.bar').css("width", '+=' + (0.1 * $('.progress').width()));
     return false;
  },
  function(){
     $('.bar').css("width", '-=' + (0.1 * $('.progress').width()));
     return false;
  });
});
于 2012-10-18T00:24:05.287 回答
1

另一个答案的示例还可以，但 .bar 最终将具有以像素为单位的固定值。如果您仍想以 % 为单位设置值，则可以尝试此操作（如果父级更改其宽度，.bar 也会更改为 % 值）：

$(function(){
    var $bar = $(".bar");
    $("#updateit").toggle(function(){
        $bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) +10 + '%');
    },
    function(){
        $bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');
    });
});
于 2012-10-18T00:55:01.933 回答
0

我注意到你的代码有几件事。

首先，确保你有一个href锚。即使不使用它也是正确的 HTML（添加return false;到您的 JavaScript 以使其不跟随链接）。我的浏览器根本无法识别该链接，因为它没有 href。

接下来，您希望用户单击链接，然后切换宽度，对吗？然后你需要这个click()事件。

在那之后，这就是我想出的：

jQuery

var isOn = true;
$(function(){
   $("#updateit").click(function(){
      console.log(isOn);
      if ( isOn ){
          isOn = false;
          $('.bar').css("width", '10%');
      } else {
          isOn = true;
          $('.bar').css("width", '20%');
      }
      return false;
  });
});​

HTML

<div class="progress progress-danger progress-striped active"> 
       <div class="bar"></div>
</div>

<a href="#" id="updateit">Click to change the progress</a>
​

CSS（用于显示.bar测试和设置初始宽度）

.bar{
    width:20%;
    height:20px;
    background:#600;
}​

jsFiddle

于 2012-10-18T00:37:01.637 回答