jQuery：切换/移动下拉箭头

Posted 2023-03-16

【中文标题】jQuery：切换/移动下拉箭头

【英文标题】：jQuery: toggle / move dropdown arrow

【发布时间】：2016-01-02 14:51:51

【问题描述】：

我目前的布局如下所示： ...并且我希望小克拉随我的导航栏选择一起移动。换句话说，当我选择“信息”时，我希望克拉在信息下移动。我已经完成了克拉的移动，但我无法让它的可见性切换工作。

jQuery

​​>

$(document).ready(function () 

    $(".navbar-link").on("click", function() 
        var el = $(this);
        var dd = el.siblings();

        var loc = el.offset();
        var left = loc.left;
        var width = el.width();
        var center = left + (0.5 * width);
        var corrected_center = center - 5;

        $(".arrow-up").css("left", corrected_center);

        if ( el.hasClass("arrow_up_visible") ) 
            $(".arrow-up").hide();
            el.removeClass("arrow_up_visible");
         else 
            $(".arrow-up").show();
            el.addClass("arrow_up_visible");
        
    );
);

html

<nav class="navbar navbar-default">
  <div class="container-fluid"> 
    <div class="row">
        <div class="col-md-2">
          <ul class="nav navbar-nav navbar-left">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Testimonials</a></li>
          </ul>
        </div>
        <div class="col-md-2">
          <ul class="nav navbar-nav navbar-left">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a></li>
          </ul>
        </div>
        <div class="col-md-4 text-center">
            <img src="smallw_red_shaddow_small.jpg"   />
        </div>
        <div class="col-md-2">
          <ul class="nav navbar-nav navbar-right">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Information</a></li>
            </ul>
        </div>
        <div class="col-md-2">
          <ul class="nav navbar-nav navbar-right">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a></li>
          </ul>
        </div>
      </div>
</div>
</nav>

css

.navbar 
    border: none;


.navbar-link 
    text-align: center;


.banner-box 
    background: #009FB2;
    left: 0;
    top: 75px;
    height: 35%;
    width: 100%;
    color: #000000;
    position: fixed;

.banner-title 
    margin-left: 116px;
    margin-top: 38px;
    font-family: open-sans;
    font-style: normal;
    font-weight: 300;


.dropdown-nav 
    z-index: 1000;
    margin-left: 0;
    position: fixed;
    top: 75px;
    background-color: #FDA220;
    color: #000000;
    width: 100%;
    left: 0px;
    display: inline;
    height: 30px;
    display: none;


.dropdown-nav-link 
    text-align: center;
    line-height: 30px;
    list-style-type: none;
    color: #000000;
    text-decoration: none;


.dropdown-menu > li 
    top: 39px;
    /* [disabled]width: 152px; */


.dropdown-menu-down 
    display: inline;


.drop-it 
    color: white;
    background: black;


.dropdown-link-a 
    color: #000000;


.dropdown-link-a:hover 
    color: #000000;
    font-weight: 700;
    text-decoration: none;

.navbar-link-header 
    color: #E7292A;


.navbar-link-header:hover 
    color: #E7292A;
    font-weight: 700;


.arrow_up_visible 


.arrow-up 
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #FDA220;
    z-index: 1000;
    left: 1011px;
    position: absolute;
    top: 66px;
    display: none;


.arrow-down 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #f00;


.arrow-right 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;

    border-left: 60px solid green;


.arrow-left 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 

    border-right:10px solid blue; 

这种切换“有效”但没有完成我想要的。理想情况下，当我单击不同的导航栏链接时，克拉应该只是移动，而不是消失，当克拉移动时，arrow_up_visible 类应该从上一个链接中删除。

我还没有为此做任何事情，但如果这样可以更容易地帮助我，我可以尝试。

谢谢

【问题讨论】：

你也应该发布你的html，如果可能的话，提供一个小提琴

我添加了css和html。我无法让小提琴看起来正确

我想我已经到了当我点击离开时需要删除类但我似乎无法让它工作的地步。也许有更好的方法？

【参考方案1】：

我在您发布标记之前创建了此内容，但想法基本相同（如果我正确理解您的问题）。

$(document).ready(function () 

    $(".navbar-link").on("click", function() 
        var el = $(this);
        var dd = el.siblings();

        var loc = el.offset();
        var left = loc.left;
        var width = el.width();
        var center = left + (0.5 * width);
        var corrected_center = center - 5;
      
        var isActive = el.hasClass('active');
		$(".navbar-link").removeClass('active');
        
        $(".arrow-up").css("left", corrected_center);
        
        if (isActive) 
            $('.arrow-up').hide();
         else 
            $('.arrow-up').show();
            el.addClass('active');
        
        
    );
);

.navbar 
    position: relative;


ul 
    list-style: none;
    padding: 0;
    margin: 0;


li 
    display: block;
    float: left;
    text-align: center;
    width: 25%;


.active 
  color: rd;


.arrow-up 
    position: absolute;
    background: orange;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    top: 20px;
    left: 0;
    display: none;
    /* important bit... */
    transition: all .5s ease;


.active 
    color: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav class="navbar">
    <ul>
        <li><a href="#" class="navbar-link">Link</a></li>
        <li><a href="#" class="navbar-link">Link</a></li>
        <li><a href="#" class="navbar-link">Link</a></li>
        <li><a href="#" class="navbar-link">Link</a></li>
    </ul>
    <div class="arrow-up"></div>
</nav>

【讨论】：

差不多了！感谢您添加动画位，这将是我的下一个问题。我唯一缺少的是当我点击一个存在克拉的链接时删除克拉（又名切换）

啊，好的。对不起，我误解了你的目的。检查更新

谢谢！！我一直在用逻辑循环让自己发疯。