jquery、css 底線切換

jquery css

mayyola 2018-05-08 16:56:04 ‧ 6418 瀏覽

分享至

各位大大好，想請問展開後要在button附底線，一開始firstone展開會有底線，點到sencond後，sencond會有底線，但再點回firstone底線就會不見，想請問要怎麼處理呢?謝謝!

http://www.ee.nsysu.edu.tw/alumni/123.html

我在

$('button').click(function() {

if ($('button').hasClass('collapsed')) {
      $(".btn").eq(0).css("text-decoration","none");
}

加了不行

else
{
$(".btn").css("text-decoration","underline");
}

<script>
$(document).ready(function(){
if ($(".show").length) {

  $(".btn").eq(0).css("text-decoration","underline");

}

$('button').click(function() {

if ($('button').hasClass('collapsed')) {
      $(".btn").eq(0).css("text-decoration","none");
}

});

});

</script>
<style type="text/css">

.card-header{
border-radius: 100px;
background:#88AA00;

}
.btn{
color:#FFFFFF;
font-size: 20px;
}
.mb-0 button:hover
{
  font-size:20px;
  color:#FFFFFF; !important;
}

</style>

html

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          firstone
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        交通123      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          sencond
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
      住宿資訊123      </div>
    </div>
  </div>
</div>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

暐翰

iT邦大師 1 級 ‧ 2018-05-08 17:40:37

最佳解答

script改成以下
邏輯寫在註解，有問題再跟我說 :-)

<script src="http://ee.nsysu.edu.tw/key/bootstrap/js/jquery.min.js"></script>
<link rel="stylesheet" href="http://ee.nsysu.edu.tw/key/bootstrap/css/bootstrap.min.css">
<script src="http://ee.nsysu.edu.tw/key/bootstrap/js/popper.min.js"></script>
<script src="http://ee.nsysu.edu.tw/key/bootstrap/js/bootstrap.min.js"></script>

<script>
  $(document).ready(function () {

    //以集合保存按鈕物件
    var listBtn = $('.btn.btn-link');

    //first dom 先有下底線
    listBtn.eq(0).css("text-decoration", "underline");

    //註冊案件事件
    listBtn.click(function () {
        //邏輯:先把所有的按鈕下底線隱藏，再把按下的按鈕下底線顯示
        listBtn.css("text-decoration", "none");
        $(this).css("text-decoration", "underline");
    });
  });
</script>

<style type="text/css">
...省略
</style>



<div id="content_p">
...省略
</div>

效果圖:

回應 1
分享
檢舉

mayyola iT邦研究生 1 級 ‧ 2018-05-08 17:51:29 檢舉

暐翰您好:感謝您:)

登入發表回應

wingkawa

iT邦新手 3 級 ‧ 2018-05-08 17:31:34

因為這邊判斷永遠是true，你是否應該讓兩個button有各自的id?

// 在console看看$('button')吧，你就知道為什麼一定是ture了
if ($('button').hasClass('collapsed')) {
    // 略
} else {
    // 這邊沒機會
}

或者換個方向思考：
試著去抓onclick的那個button，讓那個button有底線，而其他的button都把底線移掉

回應
分享
檢舉

登入發表回應

froce

iT邦大師 1 級 ‧ 2018-05-09 08:18:32

JQ只要3行code吧？

<script>
    $('.btn').click(function(){
      $('.btn').removeClass("active");
      $(this).addClass('active');
    });
    
    $('.btn').first().trigger('click');
</script>

<style>
  .btn{
    display: inline-block;
    padding: 20px;
    border: 1px solid black;
  }
  
  .active{
    text-decoration: underline;
  }
</style>

https://jsbin.com/nowofacuyu/1/edit?html,console,output

不過我主要是要建議該把css拉出來給個class處理，前端寫久了你就會知道這樣做的好處。