-2
異なるオプションメニューで異なる幅を適用したいが、ページロード時にjsが実行され、全ページオプションメニューでデフォルトの25％の幅をとる。ヘッダーファイルとヘッダーはすべてのファイルに含まれているので、ヘッダーの最初のjsが実行され、ページオプションメニューも25％の幅を取るので、ヘッダーとページに異なる幅を割り当てます。オプションメニューで異なる幅を適用したいが、最初にやるよ
私のjsとcssが与えられていますインラインcssを適用するには、それは動作していないし、別のクラスと異なるjsを作るだけでなく、最初のヘッダjsを実行し、それが幅25％だからこの問題を解決するために働いていない。
この1つは私のjsファイルされる：
! function(t) {
var e = t('<div class="stb-select-container"><span class="selected"></span></div>'),
n = t('<ul class="stb-select" style="display:none;"></ul>');
t.fn.stbDropdown = function() {
var i = t(this);
i.hide(), i.each(function(i, a) {
var o = e.clone(),
s = n.clone(),
r = t(a),
c = r.find("option");
r.after(o), r.appendTo(o), s.appendTo(o), c.each(function(e, n) {
var i = t(n),
a = t("<li></li>"),
o = i.prop("attributes");
a.prop("attributes", o), t.each(o, function(t, e) {
a.attr(e.name, e.value)
}), a.append(i.text()), s.append(a)
});
var l, p = r.children("option").filter(function(e, n) {
return t(n).is("[selected]")
});
l = 0 == p.length ? c.first() : p.first(), o.find(".selected").text(l.text()), o.on("click.stb.select", function() {
var e = t(this),
n = t.grep(t(".stb-select-container"), function(n) {
return !e.is(t(n))
});
t(n).find("ul").hide(), e.find("ul").toggle()
}), o.on("click.stb.option", "li", function(e) {
e.stopPropagation();
var n = t(this),
i = n.parents(".stb-select-container"),
a = i.find("span.selected");
a.text(n.text()), n.parents("ul").toggle();
var o = i.find("select");
o.val(n.attr("value")).change(), n.siblings().removeAttr("selected"), n.attr("selected", "selected")
}), r.on("DOMNodeInserted", function(e) {
var n = t(e.target);
if (n.is("option")) {
var i = t("<li></li>"),
a = n.prop("attributes");
i.prop("attributes", a), t.each(a, function(t, e) {
i.attr(e.name, e.value)
}), i.append(n.text()), s.append(i)
}
}), r.on("DOMNodeRemoved", function(e) {
var n = t(e.target);
n.is("option") && s.find("li:contains('" + n.text() + "')").remove()
})
})
}
}(jQuery);.stb-select-container {
font-family: inherit;
/*border-radius: 4px;*/
width: 25%;
/*width: 100%;*/
display: inline-block;
outline: 0;
box-shadow: none;
border-right: 1px solid #ccc;
/*border: solid thin rgba(0, 0, 0, 0.24);*/
padding: 14px 16px;
/* margin: 4px 8px;*/
outline: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
text-align: left;
cursor: pointer
}
.stb-select-container ul {
list-style-type: none;
margin: 0;
padding: 0
}
.stb-select-container select {
display: none
}
.stb-select-container .stb-select {
position: absolute;
background: white;
left: -1px;
top: 50px;
padding: 8px 16px;
border: solid thin rgba(0, 0, 0, 0.24);
border-top: 0;
z-index: 10;
max-height: 200px;
width: 100%;
overflow-x: auto;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px
}
.stb-select-container span {
opacity: .54
}
.stb-select-container::after {
opacity: .54;
content: "v";
position: absolute;
right: 8px;
-ms-transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5)
}
.stb-select-container .stb-select li {
opacity: .7
}
.stb-select-container .stb-select li:first-of-type {
/* opacity: .34*/
}
.stb-select-container .stb-select li+li {
margin-top: 10px
}
.stb-select-container .stb-select li:hover{
color:#3EA9D8;
}
@media screen and (max-width: 768px) {
.stb-select-container {
font-family: inherit;
font-size: 16px;
/*border-radius: 4px;*/
width: 100%;
display: inline-block;
outline: 0;
box-shadow: none;
border: 2px solid #e9e9e9;
/*border: solid thin rgba(0, 0, 0, 0.24);*/
padding: 12px 12px;
/* margin: 4px 8px;*/
outline: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
text-align: left;
cursor: pointer
}
}
this one is my html code<select name="city" id="city_result" style="height: 50px; width:100%; margin: 0px; padding: 10px; box-shadow: 0px 0px 0px white; border: none;">
<option>Your city</option>
</select>
具体的な問題を明確にしたり、詳細を追加して必要なものを正確に強調してください。現在書かれているとおり、あなたが求めていることを正確に伝えるのは難しいです。 –
別のページのオプションメニューに異なる幅を設定したい。 –