我有一些html和js代码。我无法理解如何干掉这些代码。我正在使用bootstrap-3和jquery-1.11.0。在我的js代码上我有一些下拉菜单。在下拉列表中我使用了一个图标。折叠下拉列表时，图标变为向下箭头，当下拉列表展开时，图标变为向上箭头。我需要干掉更换图标的代码，并在打开图标时关闭其他下拉菜单。是否有可能“干掉”我的html和javascript代码？如果可能的话，我该怎么做？任何人都可以帮助我吗？
这是我的HTML代码：
<div id="cpc" class="color-picker-container">
<div id="cpcc" class="color-picker-container_content">
<div class="main-tools"><span id="m-tools" class="main-tools-dropdown color-picker uS cursor-pointer">Tools<span id="m-tools-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
<div class="pred">
<div class="picker-btn-holder"><span id="tools" class="tools-dropdown color-picker cursor-pointer uS">Predefined<span id="tools-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
<div class="color-picker-btns-holder">
<div class="picker-btn-holder"><span id="btn-color" class="color-dropdown-1 color-picker cursor-pointer">Button color<span id="bg-color-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
<ul class="eg-color-ul-1">
<li class="color-holder"><a id="btn-color-1" class="eg-color c1"></a></li>
<li class="color-holder"><a id="btn-color-2" class="eg-color c2"></a></li>
<li class="color-holder"><a id="btn-color-3" class="eg-color c3"></a></li>
<li class="color-holder"><a id="btn-color-4" class="eg-color c4"></a></li>
<li class="color-holder"><a id="btn-color-5" class="eg-color c5"></a></li>
<li class="color-holder"><a id="btn-color-6" class="eg-color c6"></a></li>
<li class="color-holder"><a id="btn-color-7" class="eg-color c7"></a></li>
<li class="color-holder"><a id="btn-color-8" class="eg-color c8"></a></li>
<li class="color-holder"><a id="btn-color-9" class="eg-color c9"></a></li>
<li class="color-holder"><a id="btn-color-10" class="eg-color c10"></a></li>
<li class="color-holder"><a id="btn-color-11" class="eg-color c11"></a></li>
<li class="color-holder"><a id="btn-color-12" class="eg-color c12"></a></li>
<li class="color-holder"><a id="btn-color-13" class="eg-color c13"></a></li>
<li class="color-holder"><a id="btn-color-14" class="eg-color c14"></a></li>
<li class="color-holder"><a id="btn-color-15" class="eg-color c15"></a></li>
<li class="color-holder"><a id="btn-color-16" class="eg-color c16"></a></li>
<li class="color-holder"><a id="btn-color-17" class="eg-color c17"></a></li>
<li class="color-holder"><a id="btn-color-18" class="eg-color c18"></a></li>
<li class="color-holder"><a id="btn-color-19" class="eg-color c19"></a></li>
<li class="color-holder"><a id="btn-color-20" class="eg-color c20"></a></li>
<li class="color-holder"><a id="btn-color-21" class="eg-color c21"></a></li>
<li class="color-holder"><a id="btn-color-22" class="eg-color c22"></a></li>
<li class="color-holder"><a id="btn-color-23" class="eg-color c23"></a></li>
<li class="color-holder"><a id="btn-color-24" class="eg-color c24"></a></li>
<li class="color-holder"><a id="btn-color-25" class="eg-color c25"></a></li>
<li class="color-holder"><a id="btn-color-26" class="eg-color c26"></a></li>
<li class="color-holder"><a id="btn-color-27" class="eg-color c27"></a></li>
<li class="color-holder"><a id="btn-color-28" class="eg-color c28"></a></li>
<li class="color-holder"><a id="btn-color-29" class="eg-color c29"></a></li>
<li class="color-holder"><a id="btn-color-30" class="eg-color c30"></a></li>
<li class="color-holder"><a id="btn-color-31" class="eg-color c31"></a></li>
<li class="color-holder"><a id="btn-color-32" class="eg-color c32"></a></li>
<li class="color-holder"><a id="btn-color-33" class="eg-color c33"></a></li>
<li class="color-holder"><a id="btn-color-34" class="eg-color c34"></a></li>
<li class="color-holder"><a id="btn-color-35" class="eg-color c35"></a></li>
<li class="color-holder"><a id="btn-color-36" class="eg-color c36"></a></li>
<li class="color-holder"><a id="btn-color-37" class="eg-color c37"></a></li>
<li class="color-holder"><a id="btn-color-38" class="eg-color c38"></a></li>
<li class="color-holder"><a id="btn-color-39" class="eg-color c39"></a></li>
<li class="color-holder"><a id="btn-color-40" class="eg-color c40"></a></li>
<li class="color-holder"><a id="btn-color-41" class="eg-color c41"></a></li>
<li class="color-holder"><a id="btn-color-42" class="eg-color c42"></a></li>
<li class="color-holder"><a id="btn-color-43" class="eg-color c43"></a></li>
<li class="color-holder"><a id="btn-color-44" class="eg-color c44"></a></li>
<li class="color-holder"><a id="btn-color-45" class="eg-color c45"></a></li>
<li class="color-holder"><a id="btn-color-46" class="eg-color c46"></a></li>
<li class="color-holder"><a id="btn-color-47" class="eg-color c47"></a></li>
<li class="color-holder"><a id="btn-color-48" class="eg-color c48"></a></li>
<li class="color-holder"><a id="btn-color-49" class="eg-color c49"></a></li>
<li class="color-holder"><a id="btn-color-50" class="eg-color c50"></a></li>
<li class="color-holder"><a id="btn-color-51" class="eg-color c51"></a></li>
<li class="color-holder"><a id="btn-color-52" class="eg-color c52"></a></li>
<li class="color-holder"><a id="btn-color-53" class="eg-color c53"></a></li>
<li class="color-holder"><a id="btn-color-54" class="eg-color c54"></a></li>
<li class="color-holder"><a id="btn-color-55" class="eg-color c55"></a></li>
<li class="color-holder"><a id="btn-color-56" class="eg-color c56"></a></li>
<li class="color-holder"><a id="btn-color-57" class="eg-color c57"></a></li>
<li class="color-holder"><a id="btn-color-58" class="eg-color c58"></a></li>
<li class="color-holder"><a id="btn-color-59" class="eg-color c59"></a></li>
<li class="color-holder"><a id="btn-color-60" class="eg-color c60"></a></li>
<li class="color-holder"><a id="btn-color-61" class="eg-color c61"></a></li>
<li class="color-holder"><a id="btn-color-62" class="eg-color c62"></a></li>
<li class="color-holder"><a id="btn-color-63" class="eg-color c63"></a></li>
<li class="color-holder"><a id="btn-color-64" class="eg-color c64"></a></li>
</ul>
<div class="picker-btn-holder"><span class="color-dropdown-2 color-picker cursor-pointer">Text color<span id="text-color-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
<ul class="eg-color-ul-2">
<li class="color-holder"><a id="text-color-1" class="eg-color c1"></a></li>
<li class="color-holder"><a id="text-color-2" class="eg-color c2"></a></li>
<li class="color-holder"><a id="text-color-3" class="eg-color c3"></a></li>
<li class="color-holder"><a id="text-color-4" class="eg-color c4"></a></li>
<li class="color-holder"><a id="text-color-5" class="eg-color c5"></a></li>
<li class="color-holder"><a id="text-color-6" class="eg-color c6"></a></li>
<li class="color-holder"><a id="text-color-7" class="eg-color c7"></a></li>
<li class="color-holder"><a id="text-color-8" class="eg-color c8"></a></li>
<li class="color-holder"><a id="text-color-9" class="eg-color c9"></a></li>
<li class="color-holder"><a id="text-color-10" class="eg-color c10"></a></li>
<li class="color-holder"><a id="text-color-11" class="eg-color c11"></a></li>
<li class="color-holder"><a id="text-color-12" class="eg-color c12"></a></li>
<li class="color-holder"><a id="text-color-13" class="eg-color c13"></a></li>
<li class="color-holder"><a id="text-color-14" class="eg-color c14"></a></li>
<li class="color-holder"><a id="text-color-15" class="eg-color c15"></a></li>
<li class="color-holder"><a id="text-color-16" class="eg-color c16"></a></li>
<li class="color-holder"><a id="text-color-17" class="eg-color c17"></a></li>
<li class="color-holder"><a id="text-color-18" class="eg-color c18"></a></li>
<li class="color-holder"><a id="text-color-19" class="eg-color c19"></a></li>
<li class="color-holder"><a id="text-color-20" class="eg-color c20"></a></li>
<li class="color-holder"><a id="text-color-21" class="eg-color c21"></a></li>
<li class="color-holder"><a id="text-color-22" class="eg-color c22"></a></li>
<li class="color-holder"><a id="text-color-23" class="eg-color c23"></a></li>
<li class="color-holder"><a id="text-color-24" class="eg-color c24"></a></li>
<li class="color-holder"><a id="text-color-25" class="eg-color c25"></a></li>
<li class="color-holder"><a id="text-color-26" class="eg-color c26"></a></li>
<li class="color-holder"><a id="text-color-27" class="eg-color c27"></a></li>
<li class="color-holder"><a id="text-color-28" class="eg-color c28"></a></li>
<li class="color-holder"><a id="text-color-29" class="eg-color c29"></a></li>
<li class="color-holder"><a id="text-color-30" class="eg-color c30"></a></li>
<li class="color-holder"><a id="text-color-31" class="eg-color c31"></a></li>
<li class="color-holder"><a id="text-color-32" class="eg-color c32"></a></li>
<li class="color-holder"><a id="text-color-33" class="eg-color c33"></a></li>
<li class="color-holder"><a id="text-color-34" class="eg-color c34"></a></li>
<li class="color-holder"><a id="text-color-35" class="eg-color c35"></a></li>
<li class="color-holder"><a id="text-color-36" class="eg-color c36"></a></li>
<li class="color-holder"><a id="text-color-37" class="eg-color c37"></a></li>
<li class="color-holder"><a id="text-color-38" class="eg-color c38"></a></li>
<li class="color-holder"><a id="text-color-39" class="eg-color c39"></a></li>
<li class="color-holder"><a id="text-color-40" class="eg-color c40"></a></li>
<li class="color-holder"><a id="text-color-41" class="eg-color c41"></a></li>
<li class="color-holder"><a id="text-color-42" class="eg-color c42"></a></li>
<li class="color-holder"><a id="text-color-43" class="eg-color c43"></a></li>
<li class="color-holder"><a id="text-color-44" class="eg-color c44"></a></li>
<li class="color-holder"><a id="text-color-45" class="eg-color c45"></a></li>
<li class="color-holder"><a id="text-color-46" class="eg-color c46"></a></li>
<li class="color-holder"><a id="text-color-47" class="eg-color c47"></a></li>
<li class="color-holder"><a id="text-color-48" class="eg-color c48"></a></li>
<li class="color-holder"><a id="text-color-49" class="eg-color c49"></a></li>
<li class="color-holder"><a id="text-color-50" class="eg-color c50"></a></li>
<li class="color-holder"><a id="text-color-51" class="eg-color c51"></a></li>
<li class="color-holder"><a id="text-color-52" class="eg-color c52"></a></li>
<li class="color-holder"><a id="text-color-53" class="eg-color c53"></a></li>
<li class="color-holder"><a id="text-color-54" class="eg-color c54"></a></li>
<li class="color-holder"><a id="text-color-55" class="eg-color c55"></a></li>
<li class="color-holder"><a id="text-color-56" class="eg-color c56"></a></li>
<li class="color-holder"><a id="text-color-57" class="eg-color c57"></a></li>
<li class="color-holder"><a id="text-color-58" class="eg-color c58"></a></li>
<li class="color-holder"><a id="text-color-59" class="eg-color c59"></a></li>
<li class="color-holder"><a id="text-color-60" class="eg-color c60"></a></li>
<li class="color-holder"><a id="text-color-61" class="eg-color c61"></a></li>
<li class="color-holder"><a id="text-color-62" class="eg-color c62"></a></li>
<li class="color-holder"><a id="text-color-63" class="eg-color c63"></a></li>
<li class="color-holder"><a id="text-color-64" class="eg-color c64"></a></li>
</ul>
<div class="picker-btn-holder"><span class="color-dropdown-3 color-picker cursor-pointer">Others<span id="size-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
<ul class="eg-color-ul-3 uS">
<li class="range-holder">
<div class="font-section">
<div class="font-size-range-holder">
<a class="range-title uS">Font size:</a>
<div id="size-range" class="flat-slider"></div>
<a class="size-range-value-holder uS">20 px</a>
</div>
</div>
</li>
<li class="range-holder uS">
<div id="padding-h-range">
<a class="hp-titel uS">Horizontal Padding:</a>
<div id="pt-range" class="flat-slider"></div>
<a class="pt-range-value uS">20 px</a>
</div>
<div id="padding-v-range">
<a class="Vp-titel uS">Vertical Padding:</a>
<div id="ps-range" class="flat-slider"></div>
<a class="VP-range-value">20 px</a>
</div>
</li>
<li class="range-holder No-B uS">
<div id="padding-br-range">
<a class="br-titel uS">Border Radius:</a>
<div id="br-range" class="flat-slider"></div>
<a class="br-range-value uS">0 px</a>
</div>
</li>
</ul>
</div>
<div class="custom-tools"><span id="c-tools" class="c-tools-dropdown color-picker cursor-pointer uS">Custom<span id="c-tools-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
<div class="custom-tools-holder">
<div class="picker-btn-holder"><span id="c-btn-color" class="color-picker cursor-pointer uS">Button color<span id="c-bg-color-arrow" class="glyphicon glyphicon-menu-down icon-expand-collapse-after"></span></span></div>
<ul class="c-bg-color">
<li class="hsl-holder"><div class="c-color-bg"><div id="range-slider1"></div></div></li>
<li class="hsl-holder"><div class="c-color-bg"><div id="range-slider2"></div></div></li>
</ul>
</div>
</div>
</div><!--
--><div class="puller"><span id="Pico" class="fa fa-chevron-right"></span></div>
</div>
这是我的js代码：
/* hide the color picker */
$(".pred").hide();
$(".eg-color-ul-1").hide();
$(".eg-color-ul-2").hide();
$(".eg-color-ul-3").hide();
$(".color-picker-btns-holder").hide();
$(".custom-tools-holder").hide();
$(".c-bg-color").hide();
/* toggleClass */
var m_tools_arrow = document.getElementById ('m-tools-arrow');
$(".main-tools-dropdown").click(function() {
$(".pred").slideToggle(300);
$(m_tools_arrow).removeClass('icon-expand-collapse-after');
if (m_tools_arrow .className === 'glyphicon glyphicon-menu-down') {
$(m_tools_arrow).addClass('icon-expand-collapse');
}
else if (m_tools_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
$(m_tools_arrow).removeClass('icon-expand-collapse');
$(m_tools_arrow).addClass('icon-expand-collapse-after');
};
});
var tools_arrow = document.getElementById ('tools-arrow');
$(".tools-dropdown").click(function() {
$(".color-picker-btns-holder").slideToggle(300);
$(".custom-tools-holder").slideUp (300);
$(c_tools_arrow).removeClass('icon-expand-collapse');
$(c_tools_arrow).addClass('icon-expand-collapse-after');
$(tools_arrow).removeClass('icon-expand-collapse-after');
if (tools_arrow .className === 'glyphicon glyphicon-menu-down') {
$(tools_arrow).addClass('icon-expand-collapse');
}
else if (tools_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
$(tools_arrow).removeClass('icon-expand-collapse');
$(tools_arrow).addClass('icon-expand-collapse-after');
};
});
var c_tools_arrow = document.getElementById ('c-tools-arrow');
$(".c-tools-dropdown").click(function() {
$(".custom-tools-holder").slideToggle(300);
$(".color-picker-btns-holder").slideUp (300);
$(tools_arrow).removeClass('icon-expand-collapse');
$(tools_arrow).addClass('icon-expand-collapse-after');
$(c_tools_arrow).removeClass('icon-expand-collapse-after');
if (c_tools_arrow .className === 'glyphicon glyphicon-menu-down') {
$(c_tools_arrow).addClass('icon-expand-collapse');
}
else if (c_tools_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
$(c_tools_arrow).removeClass('icon-expand-collapse');
$(c_tools_arrow).addClass('icon-expand-collapse-after');
};
});
var bg_arrow = document.getElementById ('bg-color-arrow');
$(".color-dropdown-1").click(function() {
$(".eg-color-ul-1").slideToggle(300);
$(".eg-color-ul-2").slideUp (300);
$(".eg-color-ul-3").slideUp (300);
$(text_arrow).removeClass('icon-expand-collapse');
$(text_arrow).addClass('icon-expand-collapse-after');
$(size_arrow).removeClass('icon-expand-collapse');
$(size_arrow).addClass('icon-expand-collapse-after');
$(bg_arrow).removeClass('icon-expand-collapse-after');
if (bg_arrow .className === 'glyphicon glyphicon-menu-down') {
$(bg_arrow).addClass('icon-expand-collapse');
}
else if (bg_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
$(bg_arrow).removeClass('icon-expand-collapse');
$(bg_arrow).addClass('icon-expand-collapse-after');
};
});
var text_arrow = document.getElementById ('text-color-arrow');
$(".color-dropdown-2").click(function() {
$(".eg-color-ul-2").slideToggle(300);
$(".eg-color-ul-1").slideUp (300);
$(".eg-color-ul-3").slideUp (300);
$(bg_arrow).removeClass('icon-expand-collapse');
$(bg_arrow).addClass('icon-expand-collapse-after');
$(size_arrow).removeClass('icon-expand-collapse');
$(size_arrow).addClass('icon-expand-collapse-after');
$(text_arrow).removeClass('icon-expand-collapse-after');
if (text_arrow .className === 'glyphicon glyphicon-menu-down') {
$(text_arrow).addClass('icon-expand-collapse');
}
else if (text_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
$(text_arrow).removeClass('icon-expand-collapse');
$(text_arrow).addClass('icon-expand-collapse-after');
};
});
var size_arrow = document.getElementById ('size-arrow');
$(".color-dropdown-3").click(function() {
$(".eg-color-ul-3").slideToggle(300);
$(".eg-color-ul-2").slideUp (300);
$(".eg-color-ul-1").slideUp (300);
$(bg_arrow).removeClass('icon-expand-collapse');
$(bg_arrow).addClass('icon-expand-collapse-after');
$(text_arrow).removeClass('icon-expand-collapse');
$(text_arrow).addClass('icon-expand-collapse-after');
$(size_arrow).removeClass('icon-expand-collapse-after');
if (size_arrow .className === 'glyphicon glyphicon-menu-down') {
$(size_arrow).addClass('icon-expand-collapse');
}
else if (size_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
$(size_arrow).removeClass('icon-expand-collapse');
$(size_arrow).addClass('icon-expand-collapse-after');
};
});
var c_bg_arrow = document.getElementById ('c-bg-color-arrow');
$("#c-btn-color").click(function() {
$(".c-bg-color").slideToggle(300);
$(c_bg_arrow).removeClass('icon-expand-collapse-after');
if (c_bg_arrow .className === 'glyphicon glyphicon-menu-down') {
$(c_bg_arrow).addClass('icon-expand-collapse');
}
else if (c_bg_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
$(c_bg_arrow).removeClass('icon-expand-collapse');
$(c_bg_arrow).addClass('icon-expand-collapse-after');
};
});
答案 0 :(得分：1)
让我们思考一下我们可以抽象出来的东西，从任何重复的东西开始。
我会给你一个很好的提示，你可以从那里拿走它：
除了class和id之外，所有li标签都是相同的，所以你可以创建一个跟踪计数器的javascript函数，然后在循环时使用jquery追加：
var ol = $('ol');
for (var i = 0; i < 40; i++) {
ol.append('<li id=' + i + '>' + 'hello ' + i + '</li>');
}
使用JSBin https://jsbin.com/paturi/3/edit?html,js,output
关于JS：
这里的关键是尽可能地抽象css：
$(".eg-color-ul-1").hide();
$(".eg-color-ul-2").hide();
$(".eg-color-ul-3").hide();
如果班级只是.eg-color-ul
然后你可以用一行隐藏它们，但它取决于css而不知道这是否可行。关键是你需要尝试尽可能少的类/ ids。这样你就可以抓住多个元素并立即改变它们。