为其他元素添加JS / jQuery点击功能

时间：2018-11-16 03:23:30

标签： javascript jquery

我为每个nav标头元素编写了4种不同的click函数。我认为这不是一种有效的方法。我想知道我可以使用哪种逻辑在1个块中完成此工作，而不是为4个nav标头编写4个不同的块。

//First Nav Header

$(".header-experience").click(function() {
    $(".sub-nav-inner-container div").show();
    if(($(window).innerWidth() >= 993)) {
        $('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
        $('.sub-nav-inner-container .slick-list.draggable').animate({
            left:"0"
        },{
            duration: 300,
            easing: "linear"
        });
    }
    if(($(window).innerWidth() < 993)) {
        $('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
        $('.sub-nav-inner-container .slick-list.draggable').animate({
            left:"0"
        },{
            duration: 200,
            easing: "linear"
        });
    }
    if(($(window).innerWidth() < 476)) {
        $('.sub-nav-inner-container').css("padding-left","150px");
        $('.sub-nav-inner-container').animate({
            paddingLeft:"65px"
        },{
            duration: 200,
            easing: "linear"
        });
    }
    $(".sub-nav-inner-container").hide();
    $(".container-experience").show();
    $(".container-experience .sub-nav-inner-container").css("display","flex");
});

//Second Nav Header
$(".header-shop").click(function() {
    $(".sub-nav-inner-container div").show();
    if(($(window).innerWidth() >= 993)) {
        $('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
        $('.sub-nav-inner-container .slick-list.draggable').animate({
            left:"0"
        },{
            duration: 300,
            easing: "linear"
        });
    }
    if(($(window).innerWidth() < 993)) {
        $('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
        $('.sub-nav-inner-container .slick-list.draggable').animate({
            left:"0"
        },{
            duration: 200,
            easing: "linear"
        });
    }
    if(($(window).innerWidth() < 476)) {
        $('.sub-nav-inner-container').css("padding-left","150px");
        $('.sub-nav-inner-container').animate({
            paddingLeft:"65px"
        },{
            duration: 200,
            easing: "linear"
        });
    }
    $(".sub-nav-inner-container").hide();
    $(".container-shop").show();
    $(".container-shop .sub-nav-inner-container").css("display","flex");
});

//Third Nav Header
$(".header-extra-label").click(function() {
    $(".sub-nav-inner-container div").show();
    if(($(window).innerWidth() >= 993)) {
        $('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
        $('.sub-nav-inner-container .slick-list.draggable').animate({
            left:"0"
        },{
            duration: 300,
            easing: "linear"
        });
    }
    if(($(window).innerWidth() < 993)) {
        $('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
        $('.sub-nav-inner-container .slick-list.draggable').animate({
            left:"0"
        },{
            duration: 200,
            easing: "linear"
        });
    }
    if(($(window).innerWidth() < 476)) {
        $('.sub-nav-inner-container').css("padding-left","150px");
        $('.sub-nav-inner-container').animate({
            paddingLeft:"65px"
        },{
            duration: 200,
            easing: "linear"
        });
    }
    $(".sub-nav-inner-container").hide();
    $(".container-extra-label").show();
    $(".container-extra-label .sub-nav-inner-container").css("display","flex");
});

//Fourth Nav Header

$(".header-extra-equity").click(function() {
    $(".sub-nav-inner-container div").show();
    if(($(window).innerWidth() >= 993)) {
        $('.sub-nav-inner-container .slick-list.draggable').css("left","-100px");
        $('.sub-nav-inner-container .slick-list.draggable').animate({
            left:"0"
        },{
            duration: 300,
            easing: "linear"
        });
    }
    if(($(window).innerWidth() < 993)) {
        $('.sub-nav-inner-container .slick-list.draggable').css("left","50px");
        $('.sub-nav-inner-container .slick-list.draggable').animate({
            left:"0"
        },{
            duration: 200,
            easing: "linear"
        });
    }
    if(($(window).innerWidth() < 476)) {
        $('.sub-nav-inner-container').css("padding-left","150px");
        $('.sub-nav-inner-container').animate({
            paddingLeft:"65px"
        },{
            duration: 200,
            easing: "linear"
        });
    }
    $(".sub-nav-inner-container").hide();
    $(".container-extra-equity").show();
    $(".container-extra-equity .sub-nav-inner-container").css("display","flex");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
    <div class="slider"></div>
    <ul class="sub-nav-category nav nav-tabs nav-justified">
        <li class="nav-item active"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a></li>
    </ul>
    <div class="sub-nav-container">
        
        <!-- SHOP NAV START -->
        <div class="sub-nav-inner-container container-shop carousel">
            <div>
                <p class="sub-nav-header"><a href="{{store url="beers"}}">Beer</a></p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url="beer/new-in.html"}}">New In</a></p>
                    <p><a href="{{store url="beer/headliners.html"}}">Headliners</a></p>
                    <p><a href="{{store url="beer/seasonal.html"}}">Seasonal</a></p>
                    <p><a href="{{store url="beer/year-round.html"}}">Year round</a></p>
                    <p><a href="{{store url="beer/high-octane.html"}}">High Octane</a></p>
                    <p><a href="{{store url="beer/overworks.html"}}">OverWorks</a></p>
                    <p><a href="{{store url="beer/abstrakt.html"}}">Abstrakt</a></p>
                    <p><a href="{{store url="beer/guest.html"}}">Guest</a></p>
                </div>
            </div>
            <div>
                <p class="sub-nav-header"><a href="{{store url="merch.html"}}">Merch</a></p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url="merch/clothing.html"}}">Clothing</a></p>
                    <p><a href="{{store url="merch/chain-gang.html"}}">Chain Gang</a></p>
                    <p><a href="{{store url="merch/barware-glasses.html"}}">Barware &amp; Glasses</a></p>
                    <p><a href="#">Accessories</a></p>
                    <p><a href="{{store url="merch/sale.html"}}">Sale</a></p>
                    <p><a href="{{store url="merch/gifts.html"}}">Gifts</a></p>
                </div>
            </div>
            <div>
                <p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url="gin.html"}}">Gin</a></p>
                    <p><a href="{{store url="vodka.html"}}">Vodka</a></p>
                    <p><a href="{{store url="whisky.html"}}">Whisky</a></p>
                    <p><a href="{{store url="mixers.html"}}">Mixers</a></p>
                </div>
            </div>
            <div>
                <p class="sub-nav-header"><a href="#">Subscriptions</a></p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url="bottlebox"}}">Bottle Box</a></p>
                    <p><a href="{{store url="fanzine"}}fanzine/">Fanzine</a></p>
                    <p><a href="#">Build and buy</a></p>
                </div>
            </div>
        </div>
        <!-- SHOP NAV END -->
        <!-- BARS NAV START -->
        <div class="sub-nav-inner-container container-experience carousel">
            <div>
                <p class="sub-nav-header"><a href="{{store url="bars"}}">Bars</a></p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url="bars/uk"}}">UK</a></p>
                    <p><a href="{{store url="bars/global"}}">International</a></p>
                    <p><a href="{{store url="bars/us"}}">USA</a></p>
                    <p><a href="{{store url="bars/coming-soon"}}">Coming Soon</a></p>
                </div>
            </div>
            <div>
                <p class="sub-nav-header"><a href="#">Bar Experience</a></p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url="lowdown/chain-gang"}}">Chain Gang</a></p>
                    <p><a href="{{store url="bars/uk/dogtap"}}">Dog Tap</a></p>
                    <p><a href="{{store url="bars/beer-visa"}}">Beer Visa</a></p>
                    <p><a href="#">EFP Franchise Opportunities</a></p>
                    <p><a href="{{store url="bars/festive"}}">Festive</a></p>
                </div>
            </div>            
        </div>
        <!-- BARS NAV END -->
        <!-- DISCOVER NAV START -->
        <div class="sub-nav-inner-container container-extra-label carousel">
            <div>
                <p class="sub-nav-header"><a href="#">About</a></p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url="lowdown/brewdog-believe"}}">BrewDog Believe</a></p>
                    <p><a href="{{store url="about/culture/the-charter"}}">The Charter</a></p>
                    <p><a href="{{store url="about/culture/culture-check"}}">Culture</a></p>
                    <p><a href="{{store url="about/history"}}">History</a></p>
                    <p><a href="{{store url="about/brewdogfoundation"}}">BrewDog Foundation</a></p>
                    <p><a href="https://jobs.brewdog.com">Jobs</a></p>
                </div>
            </div>
            <div>
                <p class="sub-nav-header"><a href="{{store url="lowdown/blog"}}">Blog</a></p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url=""}}">Brewdog News</a></p>
                    <p><a href="{{store url=""}}">Business for Punks</a></p>
                    <p><a href="{{store url=""}}">Video Blog</a></p>
                    <p><a href="{{store url=""}}">Beer Rocks</a></p>
                    <p><a href="{{store url=""}}">Brewery Updates</a></p>
                    <p><a href="{{store url=""}}">Caption Competition</a></p>
                    <p><a href="{{store url=""}}">Dog's Blogs</a></p>
                    <p><a href="{{store url=""}}">BrewDog Bars</a></p>
                </div>
            </div>
            <div>
                <p class="sub-nav-header"><a href="{{store url="brewery"}}">Brewery</a></p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url="brewery/ellon-brewery"}}">Beer Making Process</a></p>
                    <p><a href="#">Ellon</a></p>
                    <p><a href="{{store url="brewery/overworks-brewery"}}">OverWorks</a></p>
                    <p><a href="{{store url="brewery/usa-brewery"}}">Columbus</a></p>
                    <p><a href="{{store url="brewery/brisbane-brewery"}}">Brisbane</a></p>
                    <p><a href="#">DIY Dog</a></p>
                    <p><a href="{{store url="dog-house"}}">DogHouse</a></p>
                    <p><a href="#">Quality Labs</a></p>
                </div>
            </div>
            <div>
                <p class="sub-nav-header"><a href="#">Events</a></p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url="events/collabfest"}}">Collabfest</a></p>
                    <p><a href="{{store url="events/metro-mayhem"}}">Metro Mayhem</a></p>
                    <p><a href="{{store url="events/agm2018"}}">AGM</a></p>
                </div>
            </div>
        </div>
        <!-- DISCOVER NAV END -->
        <!-- EFP NAV START -->
        <div class="sub-nav-inner-container container-extra-equity carousel">
            <div>
                <p class="sub-nav-header">Equity For Punks</p>
                <div class="sub-nav-contents">
                    <p><a href="{{store url="lowdown/brewdog-believe"}}">EFP UK</a></p>
                    <p><a href="{{store url="about/culture/the-charter"}}">EFP USA</a></p>
                    <p><a href="{{store url="about/culture/culture-check"}}">EFP Australia</a></p>
                    <p><a href="{{store url="about/history"}}">EFP Re-Brews</a></p>
                    <p><a href="{{store url="about/brewdogfoundation"}}">Blue Print</a></p>
                </div>
            </div>
        </div>
        <!-- EFP NAV END -->
    </div>
</div>

除了第一个单击功能行和最后两个行代码以外，所有4个nav标头的代码都相同

3 个答案:

答案 0 :(得分：1)

您可以像这样使用一些forEach循环来生成它。

function addAnimations (params) {
  if(($(window).innerWidth() >= params.width)) {
    $('.sub-nav-inner-container .slick-list.draggable').css("left",`${params.left}px`);
    $('.sub-nav-inner-container .slick-list.draggable').animate({
        left:"0"
    },{
        duration: params.duration,
        easing: "linear"
    });
  }
}

function bindHeader (selector) {
  var params = [
    {width: 993, left: -100, duration: 300},
    {width: 993, left: -50, duration: 200},
    {width: 476, left: -150, duration: 200}
  ];
  $(selector.header).click(function() {
    $(".sub-nav-inner-container div").show();
    params.forEach(function(param) {
      addAnimations(param)
    });
    $(".sub-nav-inner-container").hide();
    $(selector.menu).show();
    $(`${selector.menu} .sub-nav-inner-container`).css("display","flex");
  });
}

var selectors = [
  {header: '.header-experience', menu: '.container-experience'},
  {header: '.header-shop', menu: '.container-shop'},
  {header: '.header-extra-label', menu: '.container-extra-label'},
  {header: '.header-extra-equity', menu: '.container-extra-equity'}
]

selectors.forEach(function(selector) {
  bindHeader(selector);
})

答案 1 :(得分：1)

将第一行更改为$(".nav-header").click(function() {。

对于最后两行。将其替换为以下代码段。我已获取已点击标题的索引，并显示了相同索引的.sub-nav-inner-container。

var index = $(".nav-header").index(this);
$(".sub-nav-inner-container:nth(" + index + ")").show();
$(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");  


// All Nav Header
$(".nav-header").click(function() {
  $(".sub-nav-inner-container div").show();
  if (($(window).innerWidth() >= 993)) {
    $('.sub-nav-inner-container .slick-list.draggable').css("left", "-100px");
    $('.sub-nav-inner-container .slick-list.draggable').animate({
      left: "0"
    }, {
      duration: 300,
      easing: "linear"
    });
  }
  if (($(window).innerWidth() < 993)) {
    $('.sub-nav-inner-container .slick-list.draggable').css("left", "50px");
    $('.sub-nav-inner-container .slick-list.draggable').animate({
      left: "0"
    }, {
      duration: 200,
      easing: "linear"
    });
  }
  if (($(window).innerWidth() < 476)) {
    $('.sub-nav-inner-container').css("padding-left", "150px");
    $('.sub-nav-inner-container').animate({
      paddingLeft: "65px"
    }, {
      duration: 200,
      easing: "linear"
    });
  }
  $(".sub-nav-inner-container").hide();
  
  var index = $(".nav-header").index(this);
  $(".sub-nav-inner-container:nth(" + index + ")").show();
  $(".sub-nav-inner-container:nth(" + index + ")").find(".sub-nav-inner-container").css("display", "flex");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar-sub-nav display-none wrapper">
  <div class="slider"></div>
  <ul class="sub-nav-category nav nav-tabs nav-justified">
    <li class="nav-item active">
      <a class="nav-link" data-toggle="tab"> <span class="nav-header header-shop">Shop</span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab"> <span class="nav-header header-experience">Bars</span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-label">Discover BrewDog</span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab"> <span class="nav-header header-extra-equity">Equity for Punks</span></a>
    </li>
  </ul>
  <div class="sub-nav-container">

    <!-- SHOP NAV START -->
    <div class="sub-nav-inner-container container-shop carousel">
      <div>
        <p class="sub-nav-header"><a href="{{store url=" beers "}}">Beer</a></p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" beer/new-in.html "}}">New In</a></p>
          <p><a href="{{store url=" beer/headliners.html "}}">Headliners</a></p>
          <p><a href="{{store url=" beer/seasonal.html "}}">Seasonal</a></p>
          <p><a href="{{store url=" beer/year-round.html "}}">Year round</a></p>
          <p><a href="{{store url=" beer/high-octane.html "}}">High Octane</a></p>
          <p><a href="{{store url=" beer/overworks.html "}}">OverWorks</a></p>
          <p><a href="{{store url=" beer/abstrakt.html "}}">Abstrakt</a></p>
          <p><a href="{{store url=" beer/guest.html "}}">Guest</a></p>
        </div>
      </div>
      <div>
        <p class="sub-nav-header"><a href="{{store url=" merch.html "}}">Merch</a></p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" merch/clothing.html "}}">Clothing</a></p>
          <p><a href="{{store url=" merch/chain-gang.html "}}">Chain Gang</a></p>
          <p><a href="{{store url=" merch/barware-glasses.html "}}">Barware &amp; Glasses</a></p>
          <p><a href="#">Accessories</a></p>
          <p><a href="{{store url=" merch/sale.html "}}">Sale</a></p>
          <p><a href="{{store url=" merch/gifts.html "}}">Gifts</a></p>
        </div>
      </div>
      <div>
        <p class="sub-nav-header"><a href="spirits.html">Spirits</a></p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" gin.html "}}">Gin</a></p>
          <p><a href="{{store url=" vodka.html "}}">Vodka</a></p>
          <p><a href="{{store url=" whisky.html "}}">Whisky</a></p>
          <p><a href="{{store url=" mixers.html "}}">Mixers</a></p>
        </div>
      </div>
      <div>
        <p class="sub-nav-header"><a href="#">Subscriptions</a></p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" bottlebox "}}">Bottle Box</a></p>
          <p><a href="{{store url=" fanzine "}}fanzine/">Fanzine</a></p>
          <p><a href="#">Build and buy</a></p>
        </div>
      </div>
    </div>
    <!-- SHOP NAV END -->
    <!-- BARS NAV START -->
    <div class="sub-nav-inner-container container-experience carousel">
      <div>
        <p class="sub-nav-header"><a href="{{store url=" bars "}}">Bars</a></p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" bars/uk "}}">UK</a></p>
          <p><a href="{{store url=" bars/global "}}">International</a></p>
          <p><a href="{{store url=" bars/us "}}">USA</a></p>
          <p><a href="{{store url=" bars/coming-soon "}}">Coming Soon</a></p>
        </div>
      </div>
      <div>
        <p class="sub-nav-header"><a href="#">Bar Experience</a></p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" lowdown/chain-gang "}}">Chain Gang</a></p>
          <p><a href="{{store url=" bars/uk/dogtap "}}">Dog Tap</a></p>
          <p><a href="{{store url=" bars/beer-visa "}}">Beer Visa</a></p>
          <p><a href="#">EFP Franchise Opportunities</a></p>
          <p><a href="{{store url=" bars/festive "}}">Festive</a></p>
        </div>
      </div>
    </div>
    <!-- BARS NAV END -->
    <!-- DISCOVER NAV START -->
    <div class="sub-nav-inner-container container-extra-label carousel">
      <div>
        <p class="sub-nav-header"><a href="#">About</a></p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" lowdown/brewdog-believe "}}">BrewDog Believe</a></p>
          <p><a href="{{store url=" about/culture/the-charter "}}">The Charter</a></p>
          <p><a href="{{store url=" about/culture/culture-check "}}">Culture</a></p>
          <p><a href="{{store url=" about/history "}}">History</a></p>
          <p><a href="{{store url=" about/brewdogfoundation "}}">BrewDog Foundation</a></p>
          <p><a href="https://jobs.brewdog.com">Jobs</a></p>
        </div>
      </div>
      <div>
        <p class="sub-nav-header"><a href="{{store url=" lowdown/blog "}}">Blog</a></p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" "}}">Brewdog News</a></p>
          <p><a href="{{store url=" "}}">Business for Punks</a></p>
          <p><a href="{{store url=" "}}">Video Blog</a></p>
          <p><a href="{{store url=" "}}">Beer Rocks</a></p>
          <p><a href="{{store url=" "}}">Brewery Updates</a></p>
          <p><a href="{{store url=" "}}">Caption Competition</a></p>
          <p><a href="{{store url=" "}}">Dog's Blogs</a></p>
          <p><a href="{{store url=" "}}">BrewDog Bars</a></p>
        </div>
      </div>
      <div>
        <p class="sub-nav-header"><a href="{{store url=" brewery "}}">Brewery</a></p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" brewery/ellon-brewery "}}">Beer Making Process</a></p>
          <p><a href="#">Ellon</a></p>
          <p><a href="{{store url=" brewery/overworks-brewery "}}">OverWorks</a></p>
          <p><a href="{{store url=" brewery/usa-brewery "}}">Columbus</a></p>
          <p><a href="{{store url=" brewery/brisbane-brewery "}}">Brisbane</a></p>
          <p><a href="#">DIY Dog</a></p>
          <p><a href="{{store url=" dog-house "}}">DogHouse</a></p>
          <p><a href="#">Quality Labs</a></p>
        </div>
      </div>
      <div>
        <p class="sub-nav-header"><a href="#">Events</a></p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" events/collabfest "}}">Collabfest</a></p>
          <p><a href="{{store url=" events/metro-mayhem "}}">Metro Mayhem</a></p>
          <p><a href="{{store url=" events/agm2018 "}}">AGM</a></p>
        </div>
      </div>
    </div>
    <!-- DISCOVER NAV END -->
    <!-- EFP NAV START -->
    <div class="sub-nav-inner-container container-extra-equity carousel">
      <div>
        <p class="sub-nav-header">Equity For Punks</p>
        <div class="sub-nav-contents">
          <p><a href="{{store url=" lowdown/brewdog-believe "}}">EFP UK</a></p>
          <p><a href="{{store url=" about/culture/the-charter "}}">EFP USA</a></p>
          <p><a href="{{store url=" about/culture/culture-check "}}">EFP Australia</a></p>
          <p><a href="{{store url=" about/history "}}">EFP Re-Brews</a></p>
          <p><a href="{{store url=" about/brewdogfoundation "}}">Blue Print</a></p>
        </div>
      </div>
    </div>
    <!-- EFP NAV END -->
  </div>
</div>

答案 2 :(得分：0)

您可以使用选择器中的“逗号”分隔符来定位所有元素：

$(".header-experience, .header-shop, .header-extra-label, .header-extra-equity").click(function() {

现在所有元素都将触发相同的click事件处理程序。

当最后两行不同时，只需使用if语句：

if ($this).is(".header-experience"))
{
    $(".container-experience").show();
    $(".container-experience .sub-nav-inner-container").css("display","flex");
}
else if …….
相关问题
最新问题