|
▼ Mr.XRAYさん
> 冗談はともかくとして
> FireMonkey はモバイル開発をサポートしているんですから，
> 何かありそうな気もしないではないのですが．
> やはり HTML5 なのかな ?
とりあえず、プルダウンできるようになりました。
純粋にHTMLとjavascriptで対応しました。
見出しのメニュー項目をクリックするとその下にサブメニューが表示されます。
他の項目をクリックするとサブメニューは閉じ、選んだ項目のサブメニューが
表示されます。
メニューの外をクリックするとサブメニューは閉じます。
仕組みですが、CSSの:hoverに書かれている<ul>の親のメニュー項目1<li>を
クリックしたら
<ul>に対してXX.style.display="block";を実行します。（あたりまえ〜♪）
変更前のHTML ----------------------------
<ul id='dropmenu'>
<li><p>メニュー項目1</p></li> <<-- ここをクリックしたら
<ul> <<-- ここをstyle.display="block";してやる
<li><a href=#><p>サブメニュー1</p></a></li>
<li><a href=#><p>サブメニュー2</p></a></li>
</ul>
</li>
<li><p>見出し項目2</p></li>
以下略
変更後のHTML ----------------------------
<ul id='dropmenu'>
<li onclick="clickMenu(this)" id="menu1"><p>メニュー項目1</p></li>
<ul>
<li><a href=#><p>サブメニュー1</p></a></li>
<li><a href=#><p>サブメニュー2</p></a></li>
</ul>
</li>
<li><p>見出し項目2</p></li>
以下略
javascript ----------------------------
var actSubMenu=0; // 選択されたサブメニューを記憶する
function clickMenu(e)
{
actSubMenu = getChildBytagName(e,"UL");
}
// 親elementからタグ名が一致する最初の子elementを得る
function getChildBytagName(eOya,tName)
{
var children = eOya.childNodes;
for (var i=0; i<children.length; i++){
if (children.item(i).tagName === tName){
return children.item(i);
}
}
}
次に、サブメニューを消す方法（イベント）が分からずに困りましたが、
結局<body>のイベントで実行することにしました。
追加のHTML ----------------------------
<body onclick="ResetSetSubMenu()">
追加のjavascript ----------------------------
function ResetSetSubMenu()
{
// サブメニューのリセット
var e = document.getElementById("menu1");
var ce = getChildBytagName(e,"UL");
ce.style.display = "none";
//
// menu2〜は略
//
// サブメニューのセット
if (actSubMenu){
actSubMenu.style.display = "block";
}
actSubMenu = 0; // すぐにリセットしておく
}
今回、
onclick="clickMenu(this)" のthisに感動しました。
それと、メニューは<body>に乗っかっているので、メニューをクリックすると
メニューのonclickの後に<body>のonclickも反応するのですね。
勉強になりました。
我流なので無茶をしている・・・かもしれません。
もっとスマートな方法をご存知の方はご教示ください。
マスター FireMonkeyでなくてスミマセン。
|