How to extract JS file governing click-to-expand content?

技术交流与词典编修
,
1

I’m trying to do mdd/mdx for Cambridge Dictionary online. Take the entry love as an example.

The original display on the website is

image
image947×195 4.13 KB

The display in GoldenDict is

image
image1449×927 27.7 KB

In GoldenDict, all content of this kind is forcibly expanded and can not be clicked to collapse.

I also attach the raw txt, mdd, and mdx of this entry. Could you explain how to extract the JS code governing this click-to-expand content?

cambridge.zip (634.0 KB)

1 个赞
2

Hope you will share this dictionary soon.

3

If someone helps me solve this click-to-expand problem, I’m willing to share this dictionary :))

4

Someone diffently help you. Thanks

5

Here is my solution. Hope it can meet your requirements.
cambridge.rar (72.0 KB)

1 个赞
6

First of all, you need to add this code in your raw txt so that you can edit your own JS.

P1
P11822×258 94.1 KB

And don’t forget to hide your contents before clicking them.
P2
P21875×215 27.4 KB

1 个赞
7

There is a problem with your js, i.e. it removes the indentation of the hidden content

image
image816×387 19.7 KB

I hope for a generic solution, i.e. extracting the function controlling this behavior from the website. This would help tackle other dictionaries too.

image
image1919×886 144 KB

1 个赞
8

I fix this problem by replacing {display:inline} with {display:block} in JS.
inline to block.rar (72.0 KB)

Sorry. It’s beyond me.

2 个赞
9

Thank you so much for your help! I use BeautifulSoup to crawl data and the resulted html has a different structure to the original one.

Original and your html have the same format:
image

Mine
image

Could you explain how to do that?

10

explain1
explain11425×483 69 KB

You should change these tags in JS according to your html structure. Try this one. Or you can upload your raw data.
scripts_cb.rar (29.2 KB)

1 个赞
11

Thank you so much for your help. I got it.

12

Can you explain why you also control the class active? I thought the class display is already enough.

13

I’ve just figured out the your JS is very similar to below one:

$(document).ready(function () {
    $(".more_example_title").click(function () {
        var exampleSiblings = $(this).siblings("p.en_example")
        if (exampleSiblings.length > 0) {
            if (exampleSiblings.hasClass("active")) {
                exampleSiblings.removeClass("active");
                exampleSiblings.css({
                    "display": "none"
                });
            } else {
                exampleSiblings.addClass("active");
                exampleSiblings.css({
                    "display": "block"
                });
            }
        }
        if (exampleSiblings.length <= 0) {
            $(this).css({
                "color": "red"
            });
        }
    });
});

I feel that there is a general rule here. Could you please elaborate on how you come up with such js file?

Here is the js I found. js.zip (29.8 KB)

14

Your feeling is quite correct. I suggest you can learn some basics of JS if you are interested. It will not take too long, about few hours.

Some useful sites:

2 个赞
15

解釋
解釋1084×764 101 KB

Exactly, this kind of code is a really simple way to achieve click-to-expand effect.

  1. It is the tag where you want to click.
  2. It depends on your html structure to use “.siblings” or “.children”.
  3. It is the tag where you want to expand after clicking 1.
  4. After you click 1, the JS will expand your hidden contents, and add a new class “active” simultaneously.
  5. If your hidden content has the new class “active”, which means your contents have been expanded, the JS will remove the class “active” and hide the contents.
    In other words, it achieves click-to-hide effect.
  6. This is unnecessary. You can delete it.

Can you explain why you also control the class active ? I thought the class display is already enough.

Because you need to add an new tag to let your dictionary know whether you have clicked or not.
Otherwise, you can’t hide your contents after you clicked.

也感謝版主提供建議 Thanks a lot.

2 个赞
16

This is really great and enlightening. It seems to me your function is on top of a jquery. Could you please explain why you use that jquery? Is there any part of your function dependent on that jquery?

17

image
I think all these function dependent on that jquery, but I am not really sure. I just copy it from other dictionaries. Maybe someone else can help you.

18

Thank you so much for your dedicated help. Many things get clearer with your explanation :heart_eyes: