ブートストラップ テンプレートを使用しており、メニューがタブレットやスマートフォンの表示用に調整されたときに、ドロップダウン メニューにデフォルトの [ページを選択してください] 項目が表示されるようにしたいと考えています。私が知る限り、ドロップダウンに関連する既存のスクリプトは次のとおりです。
$cjq(".dropdown").hover(
function () {
$cjq(this).addClass("open");
},
function () {
$cjq(this).removeClass("open");
}
);
$cjq("<select />").appendTo(".buttons-container");
$cjq(".buttons-container select").addClass('nav-select');
$cjq(".nav-collapse a").each(function() {
var el = $cjq(this);
if (el.parent().hasClass("active")){
$cjq("<option />", {
"selected": "selected",
"value" : el.attr("href"),
"text" : el.html().replace(/<i>.*<\/i>/gi,'')
}).appendTo(".buttons-container select");
} else {
$cjq("<option />", {
"value" : el.attr("href"),
"text" : el.html().replace(/<i>.*<\/i>/gi,'')
}).appendTo(".buttons-container select");
}
});
$cjq(".buttons-container select").change(function() {
window.location = $cjq(this).find("option:selected").val();
});
私は以下を統合しようとしましたが、JavaScriptにあまり慣れていないため、機能させることができません:
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Please choose page"
}).appendTo(".buttons-container select");
開発ページはこちらからご覧いただけます。
誰かが何かポインタを持っていれば、本当に感謝しています!