0

たくさんのオプションを備えた selectmenu ウィジェットがあります。「さらに表示」ボタンを最後のオプションとして追加したいと思います。これにより、さらに多くのオプションをロードしてウィジェットを更新するか、すでにロードされているが表示されていない場合は表示を切り替えるだけです(いずれかの方法)大丈夫です、気にしません）。

問題は、「もっと見る」オプションをクリックしてから、選択メニュー自体を閉じることです! 複数のオプションを選択できるようにしても、クリックしてもウィジェットが閉じないため、回避策が必要です。

何か案は？

4

2 に答える 2

0

data-native-menu を true に設定し、メニューの jqm スタイルを css で次のように拡張します。

.fakeList{background-clip: padding-box;
	background-color: rgb(246, 246, 246);
	border-bottom-color: rgb(221, 221, 221);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: rgb(221, 221, 221);
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: rgb(221, 221, 221);
	border-right-style: solid;
	border-right-width: 1px;
	border-top-color: rgb(221, 221, 221);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-top-style: solid;
	border-top-width: 1px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 0px;
	color: rgb(51, 51, 51);
	cursor: pointer;
	display: block;
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 20.8px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	opacity: 1;
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
	padding-bottom: 11.2px;
	padding-left: 16px;
	padding-right: 40px;
	padding-top: 11.2px;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-decoration-color: rgb(51, 51, 51);
	text-decoration-line: none;
	text-decoration-style: solid;
	text-overflow: ellipsis;
	text-shadow: rgb(243, 243, 243) 0px 1px 0px;
	white-space: nowrap;
	-moz-user-select: none;
}

次にjsで：

$( document ).ready(function() {
$('option').addClass('fakeList');
    $('#showMore').on('click', function(){
       alert("do show more");
    });
});

于 2016-10-08T08:04:53.733 に答える
0

はい、無効なオプションが役立つ可能性があります

ただし、最初に次のような ID を指定します。

 <option id="other" disabled style="color: black; text-align: center;">Other choices</option>

次にjs部分（jQueryを使用）：

function goToOther(){
    var url = "http://qwant.com";
    window.location = url;
}


$( document ).ready(function() {
    $('#other').on('click', function(){
       goToOther();
    });
});
于 2016-10-05T12:48:10.817 に答える