jquery - 如何使用 jquery 将 sidemenuTab 显示到当前选项卡中？-6ren

jquery - 如何使用 jquery 将 sidemenuTab 显示到当前选项卡中？

转载作者：行者123 更新时间：2023-12-01 04:36:45

我正在开发一个项目，它有两个按钮电子邮件和系统，当您单击它时会生成一些元素。例如，如果您单击“电子邮件”按钮，则会创建“电子邮件”选项卡，并且“电子邮件”选项卡下方还有一个“#”按钮。两个按钮都有相同的底部元素，如系统按钮。但我的问题是，当我单击“#”按钮时，它会在电子邮件选项卡中显示 sidemenuTab。但不幸的是，当我单击系统选项卡中的“#”按钮时，它不会显示 sidemenuTab系统选项卡菜单相反，它将 sidemenuTab 显示为选项卡菜单。

http://jsfiddle.net/v6awanwn/7/

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

</head>
<style>
    #mainTab li span {
    position: relative;
    top: -31px;
    left: 5px;
}
</style>
<body>
    <div>
        <ul>
            <li class="gtab">
                <a><span title="email">Email</span></a>
            </li>
            <li class="gtab">
                <a><span title="system">system</span></a>
            </li>
        </ul>
    </div>
    <div class="tabbable" id="tabpanel">
        <ul id="mainTab" class="nav nav-tabs"></ul>
        <div class="tab-content">
        </div>
    </div>
   <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

<小时/>

$("#mainTab").on("click", "a", function (e) {
    e.preventDefault();

    $(this).tab('show');
})
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });

$('.gtab').click(function (e) {
    $('.tab-container').removeClass('invise');
    e.preventDefault();
    var id = $("#mainTab").children().length + 1;
    var tabId = 'contact_' + id;
    var tabtitle = $(this).find('span').html();

    if ($("#mainTab li").find('a').text().indexOf(tabtitle) >= 0)
        return;

    $('#mainTab').closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span> x </span></li>');
    $('<li class="tab"><span> × </span><a href="#contact_' + id + '">' + tabtitle + '</a></li>').appendTo('#mainTab');

    $('#tabpanel .tab-content').append('<div style="height:100%;padding:0px;" class="tab-pane" id="' + tabId + '"><div id="tabmenutop" style="height:30px;background-color:#2c3543"><ul style="list-style:none;padding-right:15px;line-height:29px;margin-bottom:0;float:right;"><li style="display:inline-block;"><span style="color:#fff;font-size:16px;position:relative;top:5px;"><i class="ti-search"></i></span></li><li style="display:inline-block;"><span style="color:#fff;padding-right:10px;">' + tabtitle + '</span></li></ul><span id="showmenu" style="float:left;" > <a style="color:#5F8295 !important;font-size:16px;"><i class="ti-align-justify"></i></a></span ><ul class="sidemenuul" style= "list-style:none;margin-bottom:0;float:left;padding-left:5px;" > <li style="display:inline-block;"><img src="assets/images/gardeshkar.png" alt="گردش كار" title="گردش كار" style="padding:3px 2px;" /></li> <li style="display:inline-block;"><img src="assets/images/marahel.png" alt="مراحل گردش كار" title="مراحل گردش كار" style="padding:3px 2px;" /></li> <li style="display:inline-block;"><img src="assets/images/asl mostanad.png" alt="مشاهده اصل مستند" title="مشاهده اصل مستند" style="padding:3px 2px;" /></li><li style="display:inline-block;"><img src="assets/images/form mortabet.png" alt="فرم‌هاي مرتبط" title="فرم‌هاي مرتبط" style="padding:2px;" /></li> <li style="display:inline-block;"><img src="assets/images/Form Mortabet Jadid.png" alt="ايجاد فرم مرتبط" title="ايجاد فرم مرتبط" style="padding:3px 2px;" /></li> <li style="display:inline-block;"><img src="assets/images/LOG.png" alt="رخدادهاي فرم" title="رخدادهاي فرم" style="padding:3px 2px;" /><li class="togglemenu" style="display:inline-block;"><a class="btn btn-default">#</a></li></li></ul ></div > <div class="col-lg-11 col-sm-10 col-xs-9" style="max-height:648px;height:auto;overflow:auto;float:right;">Galex web Design</div> <div id="sidemenuTab" class="col-lg-1 col-sm-2 col-xs-3 hidden" style="height:600px;float:left;background-color:#2c3543;padding:2px;"><ul style="list-style:none;padding-right:0;padding-left:0;text-align:center;"><li style="margin:5px;"><a class="btn btn-default  btn-block" style="background-color:#2c3543;">حذف</a></li><li style="margin:5px;"><a class="btn btn-default  btn-block" style="background-color:#2c3543;">جديد</a></li><li style="margin:5px;"><a class="btn btn-default  btn-block" style="background-color:#2c3543;">انصراف</a></li><li style="margin:5px;"><a class="btn btn-default btn-block" style="background-color:#2c3543;">ثبت</a></li></ul></div></div > ');

    $('#mainTab li:nth-child(' + id + ') a').click();
});

$(document).on('click', 'li.togglemenu', function () {
    //console.log('testtogglemenu');

    if ($('#sidemenuTab').hasClass('hidden')) {
        $('#sidemenuTab').removeClass('hidden');
        $('#sidemenuTab').removeClass('slideOutLeft');
        $('#sidemenuTab').delay(800).css('display', 'block').fadeIn(1000).addClass('animated slideInLeft');
    }
    else {
        $('#sidemenuTab').addClass('animated slideOutLeft');
        $('#sidemenuTab').addClass('hidden');
        $('#sidemenuTab').removeClass('slideInLeft');
    }
})

最佳答案

您的问题只是由您的选择器 $('#sidemenuTab') 引起的在这个片段中:

if ($('#sidemenuTab').hasClass('hidden')) {
    $('#sidemenuTab').removeClass('hidden');
    $('#sidemenuTab').removeClass('slideOutLeft');
    $('#sidemenuTab').delay(800).css('display', 'block').fadeIn(1000).addClass('animated slideInLeft');
}
else {
    $('#sidemenuTab').addClass('animated slideOutLeft');
    $('#sidemenuTab').addClass('hidden');
    $('#sidemenuTab').removeClass('slideInLeft');
}

sidemenuTab 是一个 id。具有特定 id 的元素应该只有一个实例。

您可以采用几种不同的更改路径来解决此问题。

你改变sidemenuTab每个选项卡都有一个唯一名称。当然，这需要您在事件处理程序中放入一些逻辑来确定要切换的选项卡。
您更改 $('#sidemenuTab')选择器来查找在单击事件的当前选项卡中找到的 sidemenuTab。

就我个人而言，我按照建议 #2 进行了更改，因为它需要对现有代码进行最少的更改。我在下面的代码片段中所做的是查看 $(this)指的是，转到 $(this) 之间最近的共享亲属和$('#sidemenuTab') 。查看代码的结构，两个选择器最接近的共享亲戚是 .tab-pane 。找到最近的共享亲戚后，我们可以调用 .find 来查找 sidemenuTab，然后继续正常操作。这一切最终看起来像这样:

if ($(this).closest('.tab-pane').find('#sidemenuTab').hasClass('hidden')) {
    $(this).closest('.tab-pane').find('#sidemenuTab').removeClass('hidden');
    $(this).closest('.tab-pane').find('#sidemenuTab').removeClass('slideOutLeft');
    $(this).closest('.tab-pane').find('#sidemenuTab').delay(800).css('display', 'block').fadeIn(1000).addClass('animated slideInLeft');
}
else {
    $(this).closest('.tab-pane').find('#sidemenuTab').addClass('animated slideOutLeft');
    $(this).closest('.tab-pane').find('#sidemenuTab').addClass('hidden');
    $(this).closest('.tab-pane').find('#sidemenuTab').removeClass('slideInLeft');
}

当然，不断调用$(this).closest('.tab-pane').find()很浪费资源，所以可以将上面的函数进一步压缩为:

var $sideMenuTab = $(this).closest('.tab-pane').find('#sidemenuTab'); 
if ($sideMenuTab.hasClass('hidden')) {
    $sideMenuTab
       .removeClass('hidden')
       .removeClass('slideOutLeft')
       .delay(800)
       .css('display', 'block')
       .fadeIn(1000)
       .addClass('animated slideInLeft');
}
else {
    $sideMenuTab
       .addClass('animated slideOutLeft')
       .addClass('hidden')
       .removeClass('slideInLeft');
}

这是一个modified, working version您的 jsFiddle，进行上述更改。

关于jquery - 如何使用 jquery 将 sidemenuTab 显示到当前选项卡中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50784765/