javascript - 如何将数组附加到下拉导航栏并禁用其中的一个选项

标签 javascript jquery html css drop-down-menu

我有一个包含 5 个元素的导航栏、下拉菜单字段、文本区域和另一个文本字段。我需要什么:

  1. 在文档准备好时禁用除主页之外的所有导航栏元素。然后当我模糊文本字段时,从它们中删除禁用的 attr 并再次激活。
  2. 将导航栏主目录下的附加下拉菜单中以001开头的下拉菜单字段中的所有值分开,行中没有第三部分(url),在附加下拉菜单中追加以002开头的值没有 (url) 的 CSS 和 javascript 下的 003 也没有 (url) 。
  3. 当用户点击主窗口下的注销选项时关闭。

这是演示:https://jsfiddle.net/ov43ebko/1/

    $(document).ready(function(){
     $('.css,.jscript,.jquery').attr('disabled','disabled');
     $('.logOut').click(function(){ 
       window.close();
     });

     // to split lines based on semicolon.
    function check(){
    var lines = $('.hiddenText textarea').val().split(/\n/);
    var texts = [];
    for (var i=0; i < lines.length; i++) {
    texts.push($.trim(lines[i]));
    }
    for (var i=0; i < texts.length; i++) {
    var removed1 = texts[i].split(';');

    $(".masters").append($("<ul><li>").text(removed1[0]));
    $(".css").append($("<ul><li>").text(removed1[1]));
    $(".jscript").append($("<ul><li>").text(removed1[2]));
    }
    }

    // to split dropdown menu choices to lines.

    function c1() {
    var resultLines = $('.filledField').find('option').size();
    var textArea ="";

    for (var i = 1; i <= resultLines; i++) {

    var xItem = $('.filledField').find('option:nth-child(' + (i) +  ')').text(); 
    textArea +=  xItem ;

    //code to split xItem into individual variables
     }
     $('.hiddenText textarea').val('');
     $('.hiddenText textarea').val(textArea);
     check();
     }
     $(".field").blur(function(){
     $('.css,.jscript,.jquery').prop("disabled", false);
     c1();
      });
      });

最佳答案

我希望这就是您想要实现的目标。

<强>1。在文档准备好时禁用除 Home 之外的所有导航栏元素。然后当我模糊文本字段时,从它们中删除禁用的 attr 并再次激活。

为此,已给 pointer-events:none 禁用 li 标签,因为它们不能使用属性 disabled 禁用。

$('.css,.jscript,.jquery').css('pointer-events', 'none');

然后通过将 css 设置回 all 来启用它。

$(".field").blur(function() {
    $('.css,.jscript,.jquery').css('pointer-events', 'all');
    c1();
});

<强>2。要分隔下拉菜单字段中以 001 开头的所有值,请在导航栏中的主菜单下的附加下拉菜单中不使用行 (url) 中的第三部分,在 CSS 下的附加下拉菜单中附加以 002 开头的值,不带 ( url) 和 003 在 javascript 下也没有 (url) 。

我可能误解了这一点,但这就是我认为您想要的。检查了第一个参数值并相应地在下拉菜单下的 ul 中附加了第二个参数值。

if (parseInt(removed1[0]) == 1) {
    $(".masters ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 2) {
    $(".css ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 3) {
    $(".jscript ul").append($("<li></li>").text(removed1[1]));
}

请引用这个 fiddle .

关于javascript - 如何将数组附加到下拉导航栏并禁用其中的一个选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37129695/

相关文章:

javascript - 如何缩短此语句

javascript - 如何在 JavaScript 中取消移位或添加到参数对象的开头

javascript - 使用 React-redux 中的 connect 时返回未定义的方法

javascript - 未设置值时删除输入

jQuery - $this 而不是 $(this)?

html - 为什么我添加 figcaption 时我的所有样式都出错了?

javascript - 搜索栏和基于 React 中 JSON 对象的匹配建议

jquery - 在 jQuery 中调用带有两个类的 div

html - CSS 页脚不会自动向下移动

html - 如何使用显示垂直对齐网格元素:grid and fill all vertical empty space?