Javascript 在JQuery UI选项卡上添加下拉菜单

我必须在“JQuery UI选项卡”的选项卡上添加一个下拉菜单，总之，我有一个如下页面：

$（函数（）{
$（“#制表符”）.tabs（）；
} );






表1的内容

表2的内容

表3的内容

下面的示例可以帮助您开始


$（函数（）{
$（“#制表符”）.tabs（）；
//下面的代码隐藏了选项卡4（#选项卡4）
$（“#制表符”）.find（'a[href=“#制表符-4”]”）.closest（'li'）.hide（）；
$（'.tab子菜单li'）。单击（函数（）{
$（'.tab子菜单li'）.removeClass（'active'）；
$（this.addClass（'active'）；
if（$（this）.text（）=='子菜单1'）
$（“#制表符”）。制表符({
现行：1
});
否则{
$（“#制表符”）。制表符({
现行：3
});
$（'a[href=“#tabs-4”]”）。最近（'li'）。removeClass（'ui-tabs-active ui-state-active'）；
$（'a[href=“#tabs-2”]”）。最近（'li'）。addClass（'ui-tabs-active-ui-state-active'）；
}
});
});
*{
大纲：无；
}
li.tab ul{
显示：无；
保证金：0；
填充：0；
列表样式：无；
边框：1px实心#d5d5；
边界半径：0 0 3px 3px；
}
标签：鼠标悬停在ulli上{
颜色：#4545；
保证金：0；
背景色：#e9e9e9；
填充：4px10px；
光标：指针；
边框底部：1px实心#d5d5；
}
li.标签：悬停ul li：悬停，
li.tab：悬停ul li.active{
背景色：#ffffff；
}
标签：悬停{
显示：块；
位置：绝对位置；
最高：100%；
左：0；
}





子菜单1
子菜单2





表1的内容

表2：表2的内容

表3的内容

表4：表4的内容

下面的示例可以帮助您开始


$（函数（）{
$（“#制表符”）.tabs（）；
//下面的代码隐藏了选项卡4（#选项卡4）
$（“#制表符”）.find（'a[href=“#制表符-4”]”）.closest（'li'）.hide（）；
$（'.tab子菜单li'）。单击（函数（）{
$（'.tab子菜单li'）.removeClass（'active'）；
$（this.addClass（'active'）；
if（$（this）.text（）=='子菜单1'）
$（“#制表符”）。制表符({
现行：1
});
否则{
$（“#制表符”）。制表符({
现行：3
});
$（'a[href=“#tabs-4”]”）。最近（'li'）。removeClass（'ui-tabs-active ui-state-active'）；
$（'a[href=“#tabs-2”]”）。最近（'li'）。addClass（'ui-tabs-active-ui-state-active'）；
}
});
});
*{
大纲：无；
}
li.tab ul{
显示：无；
保证金：0；
填充：0；
列表样式：无；
边框：1px实心#d5d5；
边界半径：0 0 3px 3px；
}
标签：鼠标悬停在ulli上{
颜色：#4545；
保证金：0；
背景色：#e9e9e9；
填充：4px10px；
光标：指针；
边框底部：1px实心#d5d5；
}
li.标签：悬停ul li：悬停，
li.tab：悬停ul li.active{
背景色：#ffffff；
}
标签：悬停{
显示：块；
位置：绝对位置；
最高：100%；
左：0；
}





子菜单1
子菜单2





表1的内容

表2：表2的内容

表3的内容

表4：表4的内容

没有本机选项，因此我们将使用一些jQuery UI黑客。我们的策略是创建一个jQueryUI菜单元素，它将被隐藏。当用户单击tab元素时，我们将显示相对于鼠标指针定位的菜单

基本HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content of tab 1.</p>
  </div>
  <div id="tabs-2">
    <p>Content of tab 2.</p>
  </div>
  <div id="tabs-3">
    <p>Content of tab 3.</p>
  </div>
</div>

Javascript:

$( function() {
  $( "#tabs" ).tabs();  //initialize the tabs
  $("#submenu").menu(); //initialize the created menu
} );

捕获每个选项卡上的单击事件：

$("a[href^='#tabs']").on("click",function(){

  if ($(this).attr("href")=="#tabs-2"){
    //it is the tab2, show the menu
    $("#submenu").show().position( 
  { my: "left top",
    of: event
    });
  }else{ //is a different tab, hide the menu
    $("#submenu").hide();
  }  
});

如果用户在子菜单上选择了某些内容，请将其隐藏

$("#submenu").on("click",function(){$(this).hide();});

检查mi。
没有本机选项，因此我们将使用一些jQueryUI黑客。我们的策略是创建一个jQueryUI菜单元素，它将被隐藏。当用户单击tab元素时，我们将显示相对于鼠标指针定位的菜单

基本HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content of tab 1.</p>
  </div>
  <div id="tabs-2">
    <p>Content of tab 2.</p>
  </div>
  <div id="tabs-3">
    <p>Content of tab 3.</p>
  </div>
</div>

Javascript:

$( function() {
  $( "#tabs" ).tabs();  //initialize the tabs
  $("#submenu").menu(); //initialize the created menu
} );

捕获每个选项卡上的单击事件：

$("a[href^='#tabs']").on("click",function(){

  if ($(this).attr("href")=="#tabs-2"){
    //it is the tab2, show the menu
    $("#submenu").show().position( 
  { my: "left top",
    of: event
    });
  }else{ //is a different tab, hide the menu
    $("#submenu").hide();
  }  
});

如果用户在子菜单上选择了某些内容，请将其隐藏

$("#submenu").on("click",function(){$(this).hide();});

检查mi。
谢谢您的回复，无论如何，应该隐藏tab4。@Alessandro-根据您的需要更新代码。检查更新的答案。嗨@Pugazh，我已经添加了一个我真正需要的图片。谢谢回复，无论如何tab4应该隐藏。@Alessandro-根据您的需要更新代码。检查更新后的答案。嗨@Pugazh，我已经添加了一个我真正需要的图像，只是说，但这可能不是最好的UI方法，因为您正在同一级别的另一个元素内的菜单中显示一个新元素。这可能会让您的一些用户感到困惑，也许您应该重新设计界面，将tab2和tab4分组为同一选项卡内的不同部分或类似的内容，但这可能不是最好的UI方法，因为您在同一级别的另一个元素内的菜单中显示新元素。这可能会让您的一些用户感到困惑，也许您应该重新设计界面，并将tab2和tab4分组为同一选项卡内的不同部分或类似的内容