Question

CREATE TABLE `tb_pasien` (
  `kode_pasien` int(4) NOT NULL AUTO_INCREMENT,
  `nama_pasien` varchar(20) NOT NULL,
  `email_pasien` varchar(20) NOT NULL,
  `username` varchar(20) NOT NULL,
  `password` varchar(255) NOT NULL,
  `alamat_pasien` text NOT NULL,
  `tanggal_lahir` date NOT NULL,
  `umur` int(2) NOT NULL,
  `kode_jk` int(2) NOT NULL,
  `no_telp` int(20) NOT NULL,
  `no_antrian` int(3) NOT NULL,
  PRIMARY KEY (`kode_pasien`),
  CONSTRAINT `tb_pasien_ibfk_1` FOREIGN KEY (`kode_pasien`) REFERENCES `tb_jk` (`kode_jk`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1


CREATE TABLE `tb_jk` (
  `kode_jk` int(2) NOT NULL AUTO_INCREMENT,
  `nama_jk` varchar(1) NOT NULL,
  PRIMARY KEY (`kode_jk`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1

我使用的脚本：

<li class="main_li">
    <a id="post_youowe" onclick="addremoveclass('youowe')" class="main_menu changetxt2" href='javascript:void(0)'>
        <span class="showme">Your Owe</span>
        <span class="hideme">Outstanding</span>
    </a>
    <ul class="sub_ul">
        <li id="post_housingloan"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('housingloan')">Home Loans 55</a> </li>
        <li id="post_carloan"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('carloan')">Car Loans</a></li>
        <li id="post_personalloan"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('personalloan')">Personal Loans</a> </li>
        <li id="post_creditcards"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('creditcards')">Credit Cards</a> </li>
    </ul>
</li>

每当我点击内部标题时，主标题就会从“优秀”变为“你欠”。我希望每当我点击内部标题时，标题应该是“优秀”，当我最小化标题按钮时，只显示“你欠”。

Answer 1

您可以将html更新为

<ul class="result_col">
            <li class="main_li">
                <a onclick="toggle(this, true);" class="main_menu changetxt2" href='javascript:void(0)'>
                    <span class="youowe" style="display:none;">Your Owe</span>
                    <span class="outstanding">Outstanding</span>
                </a>
                <ul class="sub_ul">
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Home Loans 55</a> </li>
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Car Loans</a></li>
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Personal Loans</a> </li>
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Credit Cards</a> </li>
                </ul>
            </li>
        </ul>

并使用以下脚本

function toggle(element, isParent)
    {
        if (isParent)
        {
            // Set title to you owe.
            $(".youowe").show();
            $(".outstanding").hide();

            // toggle inner UL.
            $(element).next().toggle();
        }
        else
        {
            // remove active class
            $(element).parents(".sub_ul").find("li").removeClass('active');

            // add active class to current element.
            $(element).parent().addClass('active');

            // set title to outstanding.
            $(".youowe").hide();
            $(".outstanding").show();
        }
    }

这样你的选项将打开，标题为“优秀”，当你点击突出显示它将最小化内部选项，标题将是“你欠”。点击“你欠”它将扩展内部选项，进一步点击内部选项将标题设置为“优秀”。

由于您的问题不完整，请告诉我您是否需要其他内容，我会为您更新脚本。

工作演示：https://jsfiddle.net/z07jurfv/3/

Onclick UL标题有变化吗？

1 个答案: