堆棧內存溢出
  簡體   English   中英

在另一個滑動div內滑動div

[英]sliding div within another slidng div

 原文  2016-08-31 10:00:06  8   1    javascript/ jquery

問題描述

我創建了一個滑動內容，單擊頂部的菜單，然后將下面的內容滑動到下一個“ li”。

在主菜單“替換過濾器”的最后一個鏈接中，還有另一個滑動內容。

似乎由於駐留在主系統中的第二個系統而崩潰。

js小提琴：

https://jsfiddle.net/ph3ng2fo/30/

腳本： 

var isTabSelected = false;
var lastSelectedTabLeftPos;
$(".tab_item").mouseover(function() {
            var $this = $(this);
            $this.parent().find(".moving_bg").stop().animate({
                left: $this.position()['left']
            }, { duration: 300 });
    });
    $( ".tab_item" ).mouseout(function() {
    if(isTabSelected){

    $(".moving_bg").stop().animate({
                left: ""+lastSelectedTabLeftPos
            }, { duration: 300 });
    }else
    {
    $(".moving_bg").stop().animate({
                left: "0"
            }, { duration: 300 });
    }
        });
$(".tab_item").click(function() {
isTabSelected = true;
var $this = $(this);
lastSelectedTabLeftPos = $this.position()['left'];
});


//Slide Content
var TabbedContent = {
    current: {i:null, obj:null},
    init: function() {
        $(".tab_item").click(function() {
                $(".tab_item").removeClass("tab_item_color");
    $(this).addClass("tab_item_color");
            var $this = $(this);
            TabbedContent.slideContent($this);
        });
        TabbedContent.current.i = 0;
        TabbedContent.current.obj = $(".tabslider li").eq(0);
    },
    slideContent: function($obj) {
        var $container = $obj.closest(".tabbed_content"),        
            $contentContainer = $('.bodymainMaxS'),
            $tabslider = $contentContainer.find(".tabslider");
        var i = $obj.index() - 1;
        var $lis = $tabslider.find("li");
        $new = $lis.eq(i);
        if(i === TabbedContent.current.i) {
            return;
        }
        $lis.hide().filter($new.add(TabbedContent.current.obj)).show();
        var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width();
        var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width();
        $tabslider.stop().css({
            marginLeft: margin_1 + "px"
        }).animate({
            marginLeft: margin_2 + "px"
        }, 400);
        TabbedContent.current.i = i;
        TabbedContent.current.obj = $new;
    }
}
TabbedContent.init();

var isTabSelected2 = false;
var lastSelectedTabLeftPos2;
$(".tab_item2").mouseover(function() {
            var $this2 = $(this);
            $this2.parent().find(".moving_bg2").stop().animate({
                top: $this2.position()['top']
            }, { duration: 300 });
    });
    $( ".tab_item2" ).mouseout(function() {
    if(isTabSelected2){

    $(".moving_bg2").stop().animate({
                top: ""+lastSelectedTabLeftPos2
            }, { duration: 300 });
    }else
    {
    $(".moving_bg2").stop().animate({
                top: "0"
            }, { duration: 300 });
    }
        });
$(".tab_item2").click(function() {
isTabSelected2 = true;
var $this2 = $(this);
lastSelectedTabLeftPos2 = $this2.position()['top'];
});


var TabbedContent2 = {
    current2: {i2:null, obj2:null},
    init: function() {
            $(".tab_item2").click(function() {
            $(".tab_item2").removeClass("tab_item_color2");
            $(this).addClass("tab_item_color2");
        var $this2 = $(this);
        TabbedContent2.slideContent2($this2);
        });
        TabbedContent2.current2.i2 = 0;
        TabbedContent2.current2.obj2 = $(".tabslider2 li").eq(0);
    },
    slideContent2: function($obj2) {
        var $container2 = $obj2.closest(".tabbed_content2"),        
            $contentContainer2 = $('.slide_content2'),
            $tabslider2 = $contentContainer2.find(".tabslider2");
        var i2 = $obj2.index() - 1;
        var $lis2 = $tabslider2.find("li");
        $new2 = $lis2.eq(i2);
        if(i2 === TabbedContent2.current2.i2) {
            return;
        }
        $lis2.hide().filter($new2.add(TabbedContent2.current2.obj2)).show();
        var margin_1b = (i2 < TabbedContent2.current2.i2) ? 0 : -$new2.width();
        var margin_2b = (i2 > TabbedContent2.current2.i2) ? 0 : -$new2.width();
        $tabslider2.stop().css({
            marginLeft: margin_1b + "px"
        }).animate({
            marginLeft: margin_2b + "px"
        }, 400);
        TabbedContent2.current2.i2 = i2;
        TabbedContent2.current2.obj2 = $new2;
    }
}
TabbedContent2.init();

謝謝您的幫助

1 個解決方案

解決方案1
 0  2016-08-31 11:15:09

您的代碼的問題在於，滑動效果對具有類'.tab_item'，'。tabslider'和'.tabbed_content'的元素有效

您的2級元素沒有這些課程。 而是在其類名后附加“ 2”。 例如，“。tab_item 2 ”，“。tabslider 2 ”和“ .tabbed_content 2 ”

因此，您需要：1.通過刪除級別2元素中的“ 2”來更正它們的類名。 但是，這還需要您對TabbedContent對象及其功能進行重大更改，因為現在您需要區分級別1“ tab_item”和級別2“ tab_item”的父級

  1. 第二種選擇是保持嵌套（第2層）元素的類名完整，即在其后附加“ 2”。 然后復制TabbedContent對象和函數，並編寫另一個函數TabbedContent2，其中將“ .tab_item”替換為“ .tab_item2”，將“ .tabslider”替換為“ .tabslider2”，以此類推，以解決2級子級

下面的代碼段使用第二種方法。 

 var isTabSelected = false; var lastSelectedTabLeftPos; //alert(0); $(".tab_item").mouseover(function() { var $this = $(this); $this.parent().find(".moving_bg").stop().animate({ left: $this.position()['left'] }, { duration: 300 }); }); jQuery( ".tab_item" ).mouseout(function() { if(isTabSelected){ $(".moving_bg").stop().animate({ left: ""+lastSelectedTabLeftPos }, { duration: 300 }); }else { $(".moving_bg").stop().animate({ left: "0" }, { duration: 300 }); } }); $(".tab_item").click(function() { isTabSelected = true; var $this = $(this); lastSelectedTabLeftPos = $this.position()['left']; }); //Slide Content var TabbedContent = { current: {i:null, obj:null}, init: function() { $(".tab_item").click(function() { $(".tab_item").removeClass("tab_item_color"); $(this).addClass("tab_item_color"); var $this = $(this); TabbedContent.slideContent($this); }); TabbedContent.current.i = 0; TabbedContent.current.obj = $(".tabslider li").eq(0); }, slideContent: function($obj) { var $container = $obj.closest(".tabbed_content"), $contentContainer = $('.bodymainMaxS'), $tabslider = $contentContainer.find(".tabslider"); var i = $obj.index() - 1; var $lis = $tabslider.find("li"); $new = $lis.eq(i); if(i === TabbedContent.current.i) { return; } $lis.hide().filter($new.add(TabbedContent.current.obj)).show(); var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width(); var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width(); $tabslider.stop().css({ marginLeft: margin_1 + "px" }).animate({ marginLeft: margin_2 + "px" }, 400); TabbedContent.current.i = i; TabbedContent.current.obj = $new; } }; TabbedContent.init(); var TabbedContent2 = { current: {i:null, obj:null}, init: function() { $(".tab_item2").click(function() { $(".tab_item2").removeClass("tab_item_color"); $(this).addClass("tab_item_color"); var $this = $(this); TabbedContent2.slideContent($this); }); TabbedContent2.current.i = 0; TabbedContent2.current.obj = $(".tabslider2 li").eq(0); }, slideContent: function($obj) { var $container = $obj.closest(".tabbed_content2"), $contentContainer = $('.bodymainMaxS'), $tabslider = $contentContainer.find(".tabslider2"); var i = $obj.index() - 1; var $lis = $tabslider.find("li"); $new = $lis.eq(i); if(i === TabbedContent2.current.i) { return; } $lis.hide().filter($new.add(TabbedContent2.current.obj)).show(); var margin_1 = (i > TabbedContent2.current.i) ? 0 : -$new.width(); var margin_2 = (i < TabbedContent2.current.i) ? 0 : -$new.width(); $tabslider.stop().css({ marginLeft: margin_1 + "px" }).animate({ marginLeft: margin_2 + "px" }, 400); TabbedContent2.current.i = i; TabbedContent2.current.obj = $new; } }; TabbedContent2.init(); 
 .tabbed_content { background-color: #000; width: 100%; overflow: hidden; position: relative; width: 100%; height: 100%; margin-left: 10px; } .tabs { position: relative; width:70%; float:left;} .tabs .moving_bg { background-color:#000; background-image:url(/images/arrow_down_blue.png); position: absolute; width: 600px; z-index: 7; left: 0; padding-bottom: 19px; background-position: left bottom; background-repeat: no-repeat; margin: 0 auto; } .tab_item { display: block; float: left; width: 150px; color: #bbb; text-align: center; z-index: 8; position: relative; cursor: pointer; font-family: 'SourceSansPro-SemiBold'; font-size: 15px; border-left: 1px solid #333; padding: 8px 10px 8px 10px; margin: 0 auto; text-align:center; } .tab_item:hover { color: #fff; border-left: 1px solid #333; } .tab_item_color { color: #fff; } .slide_content { width:1100px; overflow:hidden; margin: 26px 10px 0 5px; } .tabslider { width: 6000px; color: #222; } .tabslider ul { list-style:none; width:1100px; } .tabslider li /*media adjust */ { list-style:none; float: left; width: 1090px; text-align: justify; padding:0 10px 0 0; } .tabslider ul a { color: #222; text-decoration: none; } .tabslider ul a:hover { color: #222; } .tabslider ul li { padding-bottom: 7px; } .tabbed_content2 { background-color: #fff; width: 150px; overflow: hidden; position: relative; height: 100%; margin-left: 10px; float:left; } .tabs2 { position: relative; width:20%; } .tabs2 .moving_bg2 { background-color:; background-image:url(/images/arrow_down_blue.png); position: absolute; width: 150px; z-index: 7; left: 0; padding-bottom: 19px; background-position: left bottom; background-repeat: no-repeat; margin: 0 auto; } .tab_item2 { display: block; float: left; width: 150px; color: #bbb; text-align: center; z-index: 8; position: relative; cursor: pointer; font-family: 'SourceSansPro-SemiBold'; font-size: 15px; padding: 8px 10px 8px 10px; margin: 0 auto; text-align:center; } .tab_item2:hover { color: #333; } .tab_item_color2 { color: #333; } .slide_content2 { width:910px; overflow:hidden; margin: 26px 10px 0 5px; float:left; } .tabslider2 { width: 6000px; color: #222; } .tabslider2 ul { list-style:none; width:910px; } .tabslider2 li /*media adjust */ { list-style:none; float: left; width: 900px; text-align: justify; padding:0 10px 0 0; } .tabslider2 ul a { color: #222; text-decoration: none; } .tabslider2 ul a:hover { color: #222; } .tabslider2 ul li { padding-bottom: 7px; } .bodymainMax { width: 100%; background: none; overflow: visible; clear:both; margin: 0 auto; padding: 0 0 0 0; } .bodymainMaxS { width: 100%; background: none; overflow: visible; clear:both; margin: 0 auto; padding: 0 0 0 0; } .bblock1 { width: 100%; background: #000; clear:both; } .bblock3body { width: 100%; background: #ccc; padding: 10px 0 10px 0; clear:both; } .bblock1 { width: 100%; background: #000; clear:both; } .bblock2 { width: 100%; background: #217DD1; clear:both; min-height:3px; } .bblock3 { width: 100%; background: #ccc; padding: 10px 0 10px 0; clear:both; } .container { width: 1130px; margin: 0 auto; vertical-align: middle; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bblock1"> <div class="container"> <div class="bodymainMaxS"> <div class='tabbed_content'> <div class='tabs'> <div class='moving_bg'>&nbsp;</div> <span class='tab_item tab_item_color'>OVERVIEW</span> <span class='tab_item'>THE SCIENCE</span> <span class='tab_item'>ORDER</span> <span class='tab_item'>REPLACEMENT FILTERS</span> </div> </div> </div> </div> </div> <div class="bblock3"> <div class="container"> <div class="bodymainMaxS"> <div class='slide_content'> <ul class='tabslider'> <!--1st SLIDE --> <li> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy </li> <!--2nd SLIDE --> <li> kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk </li> <!--3rd SLIDE --> <li> uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu </li> <!--4th SLIDE --> <li> <div class='tabbed_content2'> <div class='tabs'> <div class='moving_bg2'>&nbsp;</div> <span class='tab_item2 tab_item_color2'>OVERVIEW</span> <span class='tab_item2'>THE SCIENCE</span> <span class='tab_item2'>ORDER</span> <span class='tab_item2'>REPLACEMENT FILTERS</span> </div> </div> <div class='slide_content2'> <ul class='tabslider2'> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quisUt enimad minim veniam, quis nostrud exercitation ullamc</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprere magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamc</li> <li>Lorem ipsum dolor sidunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamc</li> <li>Lorem ipsum olore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamc</li> </ul> </div> </li> </ul> </div> </div> </div> </div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將新的div滑到另一個div下方 在另一個div中移動一個div 如何在另一個滑動div內創建滑動div 單擊另一個div從頁腳上方滑動的div 使用箭頭鍵在另一個div中移動一個div 如何在另一個div中將地圖設置為div？ 突出顯示另一個div中的div元素 保持div寬高比在另一個div內 將div強制到容器中另一個div的頂部 滑動一個 <div> 從底部
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM